jqwidgets-framework
Version:
jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
118 lines (110 loc) • 6.05 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element Aggregates</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 how to display aggregates 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.edit.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script type="text/javascript" src="../sampledata/generatedata.js"></script>
<script type="text/javascript">
var source =
{
localdata: generatedata(200),
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'available', type: 'bool' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' }
]
};
var dataAdapter = new jqx.dataAdapter(source);
JQXElements.settings['gridSettings'] =
{
source: dataAdapter,
showstatusbar: true,
statusbarheight: 50,
editable: true,
showaggregates: true,
selectionmode: 'singlecell',
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
{
text: 'Product', datafield: 'productname', width: 170,
aggregates: ['count',
{
'Cappuccino Items':
(aggregatedValue, currentValue) => {
if (currentValue == 'Cappuccino') {
return aggregatedValue + 1;
}
return aggregatedValue;
}
}
]
},
{
text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125,
aggregates: [{
'In Stock':
(aggregatedValue, currentValue) => {
if (currentValue) {
return aggregatedValue + 1;
}
return aggregatedValue;
}
},
{
'Not In Stock':
(aggregatedValue, currentValue) => {
if (!currentValue) {
return aggregatedValue + 1;
}
return aggregatedValue;
}
}
]
},
{
text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'],
aggregatesrenderer: (aggregates) => {
var renderstring = '';
for (var obj in aggregates) {
var name = obj == 'min' ? 'Min' : 'Max';
var value = aggregates[obj];
renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value + '</div>';
}
return renderstring;
}
},
{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
]
}
</script>
</head>
<body>
<div class="example-description">
This is an example of how to display aggregates in Custom element Grid. By default the aggregates are displayed at the bottom of the grid. You can have sum, average, minimum, maximum and count. For the columns of type checkbox you can have count in and count not in. In addition you can have custom aggregates which you can define with a function. Aggregates can also be done together with the grouping functionality.
</div>
<jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>