jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
237 lines (223 loc) • 11.6 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element CustomListItemsWithKey/Value</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of custom list items in Custom Element Grid." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../scripts/json2.js"></script>
<script type="text/javascript">
var countries =
[
{ value: 'AF', label: 'Afghanistan' },
{ value: 'AL', label: 'Albania' },
{ value: 'DZ', label: 'Algeria' },
{ value: 'AR', label: 'Argentina' },
{ value: 'AM', label: 'Armenia' },
{ value: 'AU', label: 'Australia' },
{ value: 'AT', label: 'Austria' },
{ value: 'AZ', label: 'Azerbaijan' },
{ value: 'BS', label: 'Bahamas' },
{ value: 'BH', label: 'Bahrain' },
{ value: 'BD', label: 'Bangladesh' },
{ value: 'BB', label: 'Barbados' },
{ value: 'BY', label: 'Belarus' },
{ value: 'BE', label: 'Belgium' },
{ value: 'BZ', label: 'Belize' },
{ value: 'BJ', label: 'Benin' },
{ value: 'BM', label: 'Bermuda' },
{ value: 'BR', label: 'Brazil' },
{ value: 'BN', label: 'Brunei' },
{ value: 'BG', label: 'Bulgaria' },
{ value: 'CM', label: 'Cameroon' },
{ value: 'CA', label: 'Canada' },
{ value: 'CL', label: 'Chile' },
{ value: 'CN', label: 'China' },
{ value: 'CO', label: 'Columbia' },
{ value: 'CR', label: 'Costa Rica' },
{ value: 'HR', label: 'Croatia (Hrvatska)' },
{ value: 'CU', label: 'Cuba' },
{ value: 'CY', label: 'Cyprus' },
{ value: 'CZ', label: 'Czech Republic' },
{ value: 'DK', label: 'Denmark' },
{ value: 'TP', label: 'East Timor' },
{ value: 'EC', label: 'Ecuador' },
{ value: 'EG', label: 'Egypt' },
{ value: 'ER', label: 'Eritrea' },
{ value: 'EE', label: 'Estonia' },
{ value: 'ET', label: 'Ethiopia' },
{ value: 'FI', label: 'Finland' },
{ value: 'FR', label: 'France' },
{ value: 'DE', label: 'Germany' },
{ value: 'GR', label: 'Greece' },
{ value: 'HK', label: 'Hong Kong' },
{ value: 'HU', label: 'Hungary' },
{ value: 'IS', label: 'Iceland' },
{ value: 'IN', label: 'India' },
{ value: 'ID', label: 'Indonesia' },
{ value: 'IR', label: 'Iran' },
{ value: 'IQ', label: 'Iraq' },
{ value: 'IE', label: 'Ireland' },
{ value: 'IL', label: 'Israel' },
{ value: 'IT', label: 'Italy' },
{ value: 'JM', label: 'Jamaica' },
{ value: 'JP', label: 'Japan' },
{ value: 'MX', label: 'Mexico' },
{ value: 'MC', label: 'Monaco' },
{ value: 'MA', label: 'Morocco' },
{ value: 'NL', label: 'Netherlands' },
{ value: 'NZ', label: 'New Zealand' },
{ value: 'NE', label: 'Niger' },
{ value: 'NG', label: 'Nigeria' },
{ value: 'KP', label: 'North Korea' },
{ value: 'NO', label: 'Norway' },
{ value: 'PA', label: 'Panama' },
{ value: 'PE', label: 'Peru' },
{ value: 'PH', label: 'Philippines' },
{ value: 'PL', label: 'Poland' },
{ value: 'PT', label: 'Portugal' },
{ value: 'RO', label: 'Romania' },
{ value: 'RU', label: 'Russia' },
{ value: 'SA', label: 'Saudi Arabia' },
{ value: 'SK', label: 'Slovak Republic' },
{ value: 'SI', label: 'Slovenia' },
{ value: 'ZA', label: 'South Africa' },
{ value: 'KR', label: 'South Korea' },
{ value: 'ES', label: 'Spain' },
{ value: 'SE', label: 'Sweden' },
{ value: 'CH', label: 'Switzerland' },
{ value: 'TN', label: 'Tunisia' },
{ value: 'TR', label: 'Turkey' },
{ value: 'UA', label: 'Ukraine' },
{ value: 'AE', label: 'United Arab Emirates' },
{ value: 'UK', label: 'United Kingdom' },
{ value: 'US', label: 'United States' }
];
var countriesSource =
{
datatype: 'array',
datafields: [
{ name: 'label', type: 'string' },
{ name: 'value', type: 'string' }
],
localdata: countries
};
var countriesAdapter = new jqx.dataAdapter(countriesSource, { autoBind: true });
var gridSource =
{
datatype: 'array',
localdata:
[
{ countryCode: 'UK' },
{ countryCode: 'US' },
{ countryCode: 'DE' },
{ countryCode: 'FR' },
{ countryCode: 'UA' },
{ countryCode: 'CH' },
{ countryCode: 'ES' },
{ countryCode: 'TR' },
{ countryCode: 'PL' },
{ countryCode: 'NO' },
{ countryCode: 'CZ' },
{ countryCode: 'RU' },
{ countryCode: 'BG' },
{ countryCode: 'MX' },
{ countryCode: 'DK' },
{ countryCode: 'SE' },
{ countryCode: 'ZA' },
{ countryCode: 'CN' },
{ countryCode: 'HU' },
{ countryCode: 'RO' },
{ countryCode: 'JP' },
{ countryCode: 'PA' },
{ countryCode: 'MC' },
{ countryCode: 'IN' },
{ countryCode: 'HK' }
],
datafields: [
{ name: 'Country', type: 'string', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
{ name: 'countryCode', type: 'string' }
]
};
var gridAdapter = new jqx.dataAdapter(gridSource);
JQXElements.settings['gridSettings'] =
{
source: gridAdapter,
filterable: true,
showfilterrow: true,
columns: [
{
text: 'Country', filtertype: 'list', filteritems: new jqx.dataAdapter(countriesSource), datafield: 'countryCode', displayfield: 'Country',
createfilterwidget: (column, htmlElement, editor) => {
editor.jqxDropDownList({ displayMember: 'label', valueMember: 'value' });
}
}
]
}
window.onload = function() {
var myGrid = document.querySelector('jqx-grid');
myGrid.addEventListener('filter', function(event) {
var filterInformation = myGrid.getfilterinformation();
var filterslength = 0;
var data = {};
for (var x = 0; x < filterInformation.length; x++) {
// column's data field.
var filterdatafield = filterInformation[x].datafield;
// column's filter group.
var filterGroup = filterInformation[x].filter;
// column's filters.
var filters = filterGroup.getfilters();
// filter group's operator.
data[filterdatafield + 'operator'] = filterGroup.operator;
for (var m = 0; m < filters.length; m++) {
filters[m].datafield = filterdatafield;
// filter's value.
var filtervalue = filters[m].value;
data['filtervalue' + filterslength] = filtervalue.toString();
// filter's id.
if (filters[m].id) {
data['filterid' + filterslength] = filters[m].id.toString();
}
// filter's condition.
data['filtercondition' + filterslength] = filters[m].condition;
// filter's operator.
data['filteroperator' + filterslength] = filters[m].operator;
// filter's data field.
data['filterdatafield' + filterslength] = filterdatafield;
filterslength++;
};
};
document.getElementById('eventLog').innerHTML = JSON.stringify(data);
});
};
</script>
</head>
<body>
<div class="example-description">
In this sample is illustrated how to create a Custom element Grid with column which displays values from foreign data source. The DropDownList editor associated to the column is populated from the foreign data source.
</div>
<jqx-grid settings="gridSettings"></jqx-grid>
<div style="font-size: 13px; width: 800px; max-width:800px; overflow: auto; margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog">
</div>
</body>
</html>