JavaScript Grid

Bind to the filter event by type: jqxGrid. Author: http://jqwidgets.com

by jqwidgets

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">
<div id='log'>  
</div>
<div id='jqxWidget'>
    <div id="jqxgrid1"></div>
    
    <div id="jqxgrid2"></div>
</div>

JavaScript

var columnCount = 20

var getDataFields = function(amount){
    var fields = new Array();
    for(var i = 1; i <= amount; i += 1)
    {
        fields.push({
            name: 'int' + i,
            type: 'int'
        });
    }
    return fields;
}

var getColumns = function(amount){
    var columns = new Array();
    for(var i = 1; i <= amount; i += 1)
    {
        columns.push({
         text: 'int' + i,
         datafield: 'int' + i,
   //      filtertype: 'number',
         width: 50
     });
    }
    return columns;
}

 var source = {
     localdata: new Array(),
     datafields: getDataFields(columnCount),
     datatype: "array"
 };

var gridColumns = getColumns(columnCount);
var adapter = new $.jqx.dataAdapter(source);
performance.mark("1");
$("#jqxgrid1").jqxGrid({
     width: columnCount * 50,
     source: adapter,
     sortable: false,
     filterable: true,
     showfilterrow: true,
     columns: gridColumns
 });
 performance.mark("2");
$("#jqxgrid2").jqxGrid({
     width: columnCount * 50,
     source: adapter,
     sortable: false,
     filterable: true,
     showfilterrow: false,
     columns: gridColumns
 });
 performance.mark("3");

var perfEntries = performance.getEntriesByType("mark");
$('#log').append("grid1 showFilterrow: true, time: " + (perfEntries[1].startTime - perfEntries[0].startTime) +"<br/>");
$('#log').append("grid2 showFilterrow: false, time: " + (perfEntries[2].startTime - perfEntries[1].startTime) +"<br/>");