Html Grid

Invoke the renderaggregates method of the jqxGrid. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="jqxgrid"></div>
<input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" />

JavaScript

var data = generatedata(500);
var source =
{
    localdata: data,
    datafields:
    [
        { name: 'name', type: 'string' },
        { name: 'productname', type: 'string' },
        { name: 'available', type: 'bool' },
        { name: 'date', type: 'date' },
        { name: 'quantity', type: 'number' }
    ],
    datatype: "array"
};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid(
{
    width: 850,
    source: dataAdapter,
    showfilterrow: true,
    filterable: true,
    groupable: true,
    selectionmode: 'multiplecellsextended',
    columns: [
    { text: 'Name', columntype: 'textbox', datafield: 'name', width: 215 },
    { text: 'Product', datafield: 'productname', width: 220 },
    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
    { text: 'Ship Date', datafield: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
    { text: 'Qty.', datafield: 'quantity', cellsalign: 'right' }
    ]
});
$('#clearfilteringbutton').jqxButton({ height: 25 });
$('#clearfilteringbutton').click(function () {
    $("#jqxgrid").jqxGrid('clearfilters');
});