jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
198 lines (185 loc) • 9.99 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element CustomComboBoxColumn</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 Element Grid with a custom combobox column." />
<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/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">
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: 'IN' },
{ countryCode: 'HK' }
],
datafields: [
{ name: 'Country', 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,
selectionmode: 'singlecell',
autoheight: true,
editable: true,
columns: [
{
text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'combobox',
createeditor: (row, value, editor) => {
editor.jqxComboBox({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
}
}
]
};
window.onload = function() {
var myGrid = document.querySelector('jqx-grid');
var eventLog = document.querySelector('#eventLog');
myGrid.addEventListener('cellselect', function(event) {
var column = myGrid.getcolumn(event.args.datafield);
var value = myGrid.getcellvalue(event.args.rowindex, column.datafield);
var displayValue = myGrid.getcellvalue(event.args.rowindex, column.displayfield);
eventLog.innerHTML = '<div>Selected Cell<br/>Row: ' + event.args.rowindex + ', Column: ' + column.text + ', Value: ' + value + ', Label: ' + displayValue + '</div>';
});
myGrid.addEventListener('cellendedit', function(event) {
var column = myGrid.getcolumn(event.args.datafield);
if (column.displayfield != column.datafield) {
eventLog.innerHTML = '<div>Cell Edited:<br/>Index: ' + event.args.rowindex + ', Column: ' + column.text + '<br/>Value: ' + event.args.value.value + ', Label: ' + event.args.value.label
+ '<br/>Old Value: ' + event.args.oldvalue.value + ', Old Label: ' + event.args.oldvalue.label + '</div>';
}
else {
eventLog.innerHTML = '<div>Cell Edited:<br/>Row: ' + event.args.rowindex + ', Column: ' + column.text + '<br/>Value: ' + event.args.value
+ '<br/>Old Value: ' + event.args.oldvalue + '</div>';
}
});
};
</script>
</head>
<body>
<div class="example-description">
In this sample is illustrated how to create an Custom element Grid with column which displays values from foreign data source. The Custom element ComboBox editor associated to the column is populated from the foreign data source.
</div>
<jqx-grid settings="gridSettings"></jqx-grid>
<div id="eventLog" style="font-size: 13px; margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;"></div>
</body>
</html>