jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
130 lines (114 loc) • 6.57 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element Sorting</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 sorting" />
<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.sort.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
var source =
{
datatype: 'xml',
datafields: [
{ name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
{ name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
{ name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
{ name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
{ name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
{ name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
],
root: 'entry',
record: 'content',
id: { name: 'OrderID', map: 'm\\:properties>d\\:OrderID' },
url: '../../sampledata/orders.xml'
};
var dataAdapter = new jqx.dataAdapter(source);
JQXElements.settings['gridSettings'] =
{
source: dataAdapter,
sortable: true,
filterable: true,
ready: function(){
this.sortby('ShipName', 'asc');
},
altrows: true,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 250 },
{ text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
{ text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' },
{ text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
]
}
JQXElements.settings['checkBoxSettings'] =
{
checked: true
}
window.onload = function() {
var myGrid = document.querySelector('jqx-grid');
var myPanel = document.querySelector('jqx-panel');
var myButton = document.querySelector('jqx-button');
var myCheckBox = document.querySelector('jqx-check-box');
myGrid.addEventListener('sort', function(event) {
myPanel.clearcontent();
var sortInformation = event.args.sortinformation;
var sortDirection = sortInformation.sortdirection.ascending ? 'ascending' : 'descending';
if (!sortInformation.sortdirection.ascending && !sortInformation.sortdirection.descending) {
sortdirection = 'null';
}
var eventData = 'Triggered "sort" event <div>Column:' + sortInformation.sortcolumn + ', Direction: ' + sortDirection + '</div>';
myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
});
myButton.addEventListener('click', function() {
myGrid.removesort();
});
myCheckBox.addEventListener('change', function(event) {
myGrid.showsortcolumnbackground = event.args.checked;
});
};
</script>
<style>
jqx-panel > div {
border: none ;
}
</style>
</head>
<body>
<div class="example-description">
This is an example of Custom element Grid sorting. You can see how to enable sorting and sort by a column. Alphabetical sorting happens automatically when you press the column header. You can also define the sorting criteria from the popup window. You can sort ascending or descending by default and also implement custom sorting and have your own compare function. Sorting is one of the most often used operations in a Grid.
</div>
<div style="font-size: 13px; font-family: Verdana; float: left;">
<jqx-grid settings="gridSettings"></jqx-grid>
<div style="margin-top: 30px;">
<div style="float: left; margin-right: 10px;">
<jqx-button>Remove Sort</jqx-button>
<div style="margin-top: 10px"></div>
<jqx-check-box settings="checkBoxSettings">Sort Background</jqx-check-box>
</div>
<div style="margin-left: 100px; float: left;">
Event Log:
<jqx-panel></jqx-panel>
</div>
</div>
</div>
</body>
</html>