jxqGrid DDL filter delay problem
Demonstrates how adding drop-down list filtering drastically effects performance.
by JC Wren
HTML
<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://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxgrid'></div>
<p>
updaterow: <span id='timeDiv'>0</span>ms, commit: <span id="commitDiv">0</span>ms
</p>
JavaScript
var divisions = [{
label: 'Bracket 1',
value: 'B1'
}, {
label: 'Bracket 2',
value: 'B2'
}, {
label: 'Bracket 3',
value: 'B3'
}, {
label: 'Bracket 4',
value: 'B4'
}, {
label: 'Bracket 5',
value: 'B5'
}];
var divisionsSource = {
datatype: 'array',
datafields: [{
name: 'value',
type: 'string'
}, {
name: 'label',
type: 'string'
}],
localdata: divisions
};
var divisionsAdapter = new $.jqx.dataAdapter(divisionsSource, {
autoBind: true
});
var players = [{
sh_fn: 'Steve',
sh_ln: 'Martin',
sh_div1: 'B1',
sh_div2: 'B2',
sh_div3: 'B3',
sh_div4: 'B4'
}, {
sh_fn: 'Carmen',
sh_ln: 'San Diego',
sh_div1: 'B1',
sh_div2: 'B2',
sh_div3: 'B3',
sh_div4: 'B4'
}, {
sh_fn: 'Bill',
sh_ln: 'Murray',
sh_div1: 'B1',
sh_div2: 'B2',
sh_div3: 'B3',
sh_div4: 'B4'
}, {
sh_fn: 'Peter',
sh_ln: 'Falk',
sh_div1: 'B1',
sh_div2: 'B2',
sh_div3: 'B3',
sh_div4: 'B4'
}, {
sh_fn: 'Angelica',
sh_ln: 'Houston',
sh_div1: 'B1',
sh_div2: 'B2',
sh_div3: 'B3',
sh_div4: 'B4'
}, {
sh_fn: 'Christina',
sh_ln: 'Ricci',
sh_div1: 'B1',
sh_div2: 'B2',
sh_div3: 'B3',
sh_div4: 'B4'
}];
var playerSource = {
datatype: 'array',
datafields: [{
name: 'sh_fn',
type: 'string'
}, {
name: 'sh_ln',
type: 'string'
}, {
name: 'sh_div1',
type: 'string'
}, {
name: 'sh_div1_fmt',
value: 'sh_div1',
values: {
source: divisionsAdapter.records,
value: 'value',
name: 'label'
}
}, {
name: 'sh_div2',
type: 'string'
}, {
name: 'sh_div2_fmt',
value: 'sh_div2',
values: {
source: divisionsAdapter.records,
value: 'value',
name: 'label'
}
}, {
name: 'sh_div3',
type:...