jqwidgets-framework
Version:
jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
234 lines (228 loc) • 12.3 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.11.1.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/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">
$(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: "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 - 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', type: "string", 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,
filterable: true,
showfilterrow: true,
columns: [
{
text: 'Country', filtertype: 'list', filteritems: new $.jqx.dataAdapter(countriesSource), datafield: 'countryCode', displayfield: 'Country',
createfilterwidget: function (column, htmlElement, editor) {
editor.jqxDropDownList({ displayMember: "label", valueMember: "value" });
}
}
]
});
$("#grid").on('filter', function (event) {
// get filter information.
var filterInformation = $("#grid").jqxGrid('getfilterinformation');
var filterdata = {};
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++;
}
}
$("#eventLog").html(JSON.stringify(data));
});
});
</script>
</head>
<body class='default'>
<div id="grid">
</div>
<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>