jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
206 lines (196 loc) • 11.2 kB
HTML
<html lang="en">
<head>
<title id='Description'>In this sample is illustrated how to create a Grid with column which displays values from foreign data source. The DropDownList editor associated to the column is populated from the foreign data source.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.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">
$(document).ready(function () {
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
});
// prepare the data
var gridSource =
{
datatype: "array",
localdata:
[
{ countryCode: "UK" },
{ countryCode: "US" },
{ countryCode: "DE" },
{ countryCode: "FR" },
{ countryCode: "IN" },
{ countryCode: "HK" }
],
datafields: [
// name - determines the field's name.
// value - the field's value in the data source.
// values - specifies the field's values.
// values.source - specifies the foreign source. The expected value is an array.
// values.value - specifies the field's value in the foreign source.
// values.name - specifies the field's name in the foreign source.
// When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter.
{ name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
{ name: 'countryCode', type: 'string'}
]
};
var gridAdapter = new $.jqx.dataAdapter(gridSource);
$("#grid").jqxGrid(
{
width: 600,
source: gridAdapter,
selectionmode: 'singlecell',
autoheight: true,
editable: true,
columns: [
{
text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'dropdownlist',
createeditor: function (row, value, editor) {
editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
}
}
]
});
$("#grid").on('cellselect', function (event) {
var column = $("#grid").jqxGrid('getcolumn', event.args.datafield);
var value = $("#grid").jqxGrid('getcellvalue', event.args.rowindex, column.datafield);
var displayValue = $("#grid").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield);
$("#eventLog").html("<div>Selected Cell<br/>Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue + "</div>");
});
$("#grid").on('cellendedit', function (event) {
var column = $("#grid").jqxGrid('getcolumn', event.args.datafield);
if (column.displayfield != column.datafield) {
$("#eventLog").html("<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").html("<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 class='default'>
<div id='jqxWidget'>
<div id="grid">
</div>
<div style="font-size: 13px; margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>