jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Certain Grid column operations take too long
Tagged: grid, hide grid column, pin column
This topic contains 2 replies, has 2 voices, and was last updated by rgburnap 12 years, 4 months ago.
-
Author
-
When there exist many columns in a grid, operations such as hiding a column or pinning columns take several seconds. Is there another way to perform the operations such that they do not have to occur after the grid is ready? The following code illustrates the problem and is a modification of one of the demos.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example illustrates how hiding or pinning columns takes several seconds each.</title>
<link rel=”stylesheet” href=”/js/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”/js/jquery.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/globalization/jquery.global.js”></script>
<script type=”text/javascript”>function generatedata(rowscount, hasNullValues) {
// prepare the data
var data = new Array();
if (rowscount == undefined)
rowscount = 100;
var firstNames = [“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”];
var lastNames = [“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”];
var productNames = [“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”];
var priceValues = [“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”];
for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row[“id”] = i;
row[“available”] = productindex % 2 == 0;
if (hasNullValues == true) {
if (productindex % 2 != 0) {
var random = Math.floor(Math.random() * rowscount);
row[“available”] = i % random == 0 ? null : false;
}
}
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“name”] = row[“firstname”] + ” ” + row[“lastname”];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;
var date = new Date();
date.setFullYear(2013, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row[“date”] = date;
row[“c1”] = quantity > 4 ? 1 : 0;
row[“c2”] = quantity > 3 ? 1 : 0;
row[“c3”] = quantity > 2 ? 1 : 0;
row[“c4”] = quantity > 1 ? 1 : 0;
row[“c5”] = quantity > 2 ? 1 : 0;
row[“c6”] = quantity > 3 ? 1 : 0;
row[“c7”] = quantity > 4 ? 1 : 0;
row[“c8”] = quantity > 5 ? 1 : 0;
row[“c9”] = quantity > 6 ? 1 : 0;
row[“c10”] = quantity > 7 ? 1 : 0;
row[“c11”] = quantity > 8 ? 1 : 0;
row[“c12”] = quantity > 9 ? 1 : 0;
row[“c13”] = quantity > 1 ? 1 : 0;
row[“c14”] = quantity > 2 ? 1 : 0;
row[“c15”] = quantity > 3 ? 1 : 0;
row[“c16”] = quantity > 4 ? 1 : 0;
row[“c17”] = quantity > 5 ? 1 : 0;
row[“c18”] = quantity > 6 ? 1 : 0;
row[“c19”] = quantity > 7 ? 1 : 0;
row[“c20”] = quantity > 8 ? 1 : 0;
row[“c21”] = quantity > 9 ? 1 : 0;
data[i] = row;
}
return data;
}$(document).ready(function () {
// Timers:
var startTime = new Date();
var data = generatedata(500);
var dataEnd = new Date();
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’ },
{ name: “c1”, type: ‘bool’ },
{ name: “c2”, type: ‘bool’ },
{ name: “c3”, type: ‘bool’ },
{ name: “c4”, type: ‘bool’ },
{ name: “c5”, type: ‘bool’ },
{ name: “c6”, type: ‘bool’ },
{ name: “c7”, type: ‘bool’ },
{ name: “c8”, type: ‘bool’ },
{ name: “c9”, type: ‘bool’ },
{ name: “c10”, type: ‘bool’ },
{ name: “c11”, type: ‘bool’ },
{ name: “c12”, type: ‘bool’ },
{ name: “c13”, type: ‘bool’ },
{ name: “c14”, type: ‘bool’ },
{ name: “c15”, type: ‘bool’ },
{ name: “c16”, type: ‘bool’ },
{ name: “c17”, type: ‘bool’ },
{ name: “c18”, type: ‘bool’ },
{ name: “c19”, type: ‘bool’ },
{ name: “c20”, type: ‘bool’ },
{ name: “c21”, type: ‘bool’ }],
datatype: “array”
};var daStart = new Date();
var dataAdapter = new $.jqx.dataAdapter(source);
var daEnd = new Date();var gridStart = new Date();
$(“#jqxgrid”).jqxGrid({
width: 1300,
height: 700,
source: dataAdapter,
showfilterrow: true,
filterable: true,
selectionmode: ‘singlecell’,
ready: function() {var hideStart = new Date();
$(“#jqxgrid”).jqxGrid(“hidecolumn”, “available”);
var pinStart1 = new Date();
$(“#jqxgrid”).jqxGrid(“pincolumn”, “name”);
var pinStart2 = new Date();
$(“#jqxgrid”).jqxGrid(“pincolumn”, “productname”);
var pinStart3 = new Date();
$(“#jqxgrid”).jqxGrid(“pincolumn”, “date”);
var pinEnd = new Date();
$(“#hideTime”).text( Number( (pinStart1.getTime() – hideStart.getTime())/1000.0) + ” seconds” );
$(“#pin1Time”).text( Number( (pinStart2.getTime() – pinStart1.getTime())/1000.0) + ” seconds” );
$(“#pin2Time”).text( Number( (pinStart3.getTime() – pinStart2.getTime())/1000.0) + ” seconds” );
$(“#pin3Time”).text( Number( (pinEnd.getTime() – pinStart3.getTime())/1000.0) + ” seconds” );},
columns: [
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 67 },
{ text: ‘Name’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘name’, width: 115 },
{ text: ‘Product’, filtertype: ‘checkedlist’, datafield: ‘productname’, width: 220 },
{ text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘date’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘number’, cellsalign: ‘right’, width: 67 },
{ text: ‘c1’, datafield: ‘c1’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c2’, datafield: ‘c2’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c3’, datafield: ‘c3’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c4’, datafield: ‘c4’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c5’, datafield: ‘c5’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c6’, datafield: ‘c6’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c7’, datafield: ‘c7’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c8’, datafield: ‘c8’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c9’, datafield: ‘c9’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c10’, datafield: ‘c10’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c11’, datafield: ‘c11’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c12’, datafield: ‘c12’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c13’, datafield: ‘c13’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c14’, datafield: ‘c14’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c15’, datafield: ‘c15’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c16’, datafield: ‘c16’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c17’, datafield: ‘c17’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c18’, datafield: ‘c18’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c19’, datafield: ‘c19’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c10’, datafield: ‘c20’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c21’, datafield: ‘c21’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 }]
});var endTime = new Date();
$(‘#clearfilteringbutton’).jqxButton({ height: 25});
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});$(“#dataTime”).text( Number( (dataEnd.getTime() – startTime.getTime())/1000.0) + ” seconds” );
$(“#sourceTime”).text( Number( (daEnd.getTime() – daStart.getTime())/1000.0) + ” seconds” );
$(“#gridTime”).text( Number( (endTime.getTime() – gridStart.getTime())/1000.0) + ” seconds” );
$(“#totalTime”).text( Number( (endTime.getTime() – startTime.getTime())/1000.0) + ” seconds” );
});
</script>
</head>
<body>
<div id=”jqxgrid”></div>
<input style=”margin-top: 10px;” value=”Remove Filter” id=”clearfilteringbutton” type=”button” /><br /><br />
<div>Data: <span id=”dataTime”></span></div><br />
<div>Adapter: <span id=”sourceTime”></span></div><br />
<div>Hide Available: <span id=”hideTime”></span></div><br />
<div>Pin Name: <span id=”pin1Time”></span></div><br />
<div>Pin Product: <span id=”pin2Time”></span></div><br />
<div>Pin Ship Date: <span id=”pin3Time”></span></div><br />
<div>Grid Total: <span id=”gridTime”></span></div><br />
<div>Grand Total: <span id=”totalTime”></span></div>
</body>
</html><!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example illustrates how hiding or pinning columns takes several seconds each.</title>
<link rel=”stylesheet” href=”/js/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”/js/jquery.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/globalization/jquery.global.js”></script>
<script type=”text/javascript”>function generatedata(rowscount, hasNullValues) {
// prepare the data
var data = new Array();
if (rowscount == undefined)
rowscount = 100;
var firstNames = [“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”];
var lastNames = [“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”];
var productNames = [“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”];
var priceValues = [“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”];
for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row[“id”] = i;
row[“available”] = productindex % 2 == 0;
if (hasNullValues == true) {
if (productindex % 2 != 0) {
var random = Math.floor(Math.random() * rowscount);
row[“available”] = i % random == 0 ? null : false;
}
}
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“name”] = row[“firstname”] + ” ” + row[“lastname”];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;
var date = new Date();
date.setFullYear(2013, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row[“date”] = date;
row[“c1”] = quantity > 4 ? 1 : 0;
row[“c2”] = quantity > 3 ? 1 : 0;
row[“c3”] = quantity > 2 ? 1 : 0;
row[“c4”] = quantity > 1 ? 1 : 0;
row[“c5”] = quantity > 2 ? 1 : 0;
row[“c6”] = quantity > 3 ? 1 : 0;
row[“c7”] = quantity > 4 ? 1 : 0;
row[“c8”] = quantity > 5 ? 1 : 0;
row[“c9”] = quantity > 6 ? 1 : 0;
row[“c10”] = quantity > 7 ? 1 : 0;
row[“c11”] = quantity > 8 ? 1 : 0;
row[“c12”] = quantity > 9 ? 1 : 0;
row[“c13”] = quantity > 1 ? 1 : 0;
row[“c14”] = quantity > 2 ? 1 : 0;
row[“c15”] = quantity > 3 ? 1 : 0;
row[“c16”] = quantity > 4 ? 1 : 0;
row[“c17”] = quantity > 5 ? 1 : 0;
row[“c18”] = quantity > 6 ? 1 : 0;
row[“c19”] = quantity > 7 ? 1 : 0;
row[“c20”] = quantity > 8 ? 1 : 0;
row[“c21”] = quantity > 9 ? 1 : 0;
data[i] = row;
}
return data;
}$(document).ready(function () {
// Timers:
var startTime = new Date();
var data = generatedata(500);
var dataEnd = new Date();
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’ },
{ name: “c1”, type: ‘bool’ },
{ name: “c2”, type: ‘bool’ },
{ name: “c3”, type: ‘bool’ },
{ name: “c4”, type: ‘bool’ },
{ name: “c5”, type: ‘bool’ },
{ name: “c6”, type: ‘bool’ },
{ name: “c7”, type: ‘bool’ },
{ name: “c8”, type: ‘bool’ },
{ name: “c9”, type: ‘bool’ },
{ name: “c10”, type: ‘bool’ },
{ name: “c11”, type: ‘bool’ },
{ name: “c12”, type: ‘bool’ },
{ name: “c13”, type: ‘bool’ },
{ name: “c14”, type: ‘bool’ },
{ name: “c15”, type: ‘bool’ },
{ name: “c16”, type: ‘bool’ },
{ name: “c17”, type: ‘bool’ },
{ name: “c18”, type: ‘bool’ },
{ name: “c19”, type: ‘bool’ },
{ name: “c20”, type: ‘bool’ },
{ name: “c21”, type: ‘bool’ }],
datatype: “array”
};var daStart = new Date();
var dataAdapter = new $.jqx.dataAdapter(source);
var daEnd = new Date();var gridStart = new Date();
$(“#jqxgrid”).jqxGrid({
width: 1300,
height: 700,
source: dataAdapter,
showfilterrow: true,
filterable: true,
selectionmode: ‘singlecell’,
ready: function() {var hideStart = new Date();
$(“#jqxgrid”).jqxGrid(“hidecolumn”, “available”);
var pinStart1 = new Date();
$(“#jqxgrid”).jqxGrid(“pincolumn”, “name”);
var pinStart2 = new Date();
$(“#jqxgrid”).jqxGrid(“pincolumn”, “productname”);
var pinStart3 = new Date();
$(“#jqxgrid”).jqxGrid(“pincolumn”, “date”);
var pinEnd = new Date();
$(“#hideTime”).text( Number( (pinStart1.getTime() – hideStart.getTime())/1000.0) + ” seconds” );
$(“#pin1Time”).text( Number( (pinStart2.getTime() – pinStart1.getTime())/1000.0) + ” seconds” );
$(“#pin2Time”).text( Number( (pinStart3.getTime() – pinStart2.getTime())/1000.0) + ” seconds” );
$(“#pin3Time”).text( Number( (pinEnd.getTime() – pinStart3.getTime())/1000.0) + ” seconds” );},
columns: [
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 67 },
{ text: ‘Name’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘name’, width: 115 },
{ text: ‘Product’, filtertype: ‘checkedlist’, datafield: ‘productname’, width: 220 },
{ text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘date’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘number’, cellsalign: ‘right’, width: 67 },
{ text: ‘c1’, datafield: ‘c1’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c2’, datafield: ‘c2’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c3’, datafield: ‘c3’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c4’, datafield: ‘c4’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c5’, datafield: ‘c5’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c6’, datafield: ‘c6’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c7’, datafield: ‘c7’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c8’, datafield: ‘c8’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c9’, datafield: ‘c9’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c10’, datafield: ‘c10’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c11’, datafield: ‘c11’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c12’, datafield: ‘c12’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c13’, datafield: ‘c13’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c14’, datafield: ‘c14’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c15’, datafield: ‘c15’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c16’, datafield: ‘c16’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c17’, datafield: ‘c17’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c18’, datafield: ‘c18’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c19’, datafield: ‘c19’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c10’, datafield: ‘c20’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 },
{ text: ‘c21’, datafield: ‘c21’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 30 }]
});var endTime = new Date();
$(‘#clearfilteringbutton’).jqxButton({ height: 25});
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});$(“#dataTime”).text( Number( (dataEnd.getTime() – startTime.getTime())/1000.0) + ” seconds” );
$(“#sourceTime”).text( Number( (daEnd.getTime() – daStart.getTime())/1000.0) + ” seconds” );
$(“#gridTime”).text( Number( (endTime.getTime() – gridStart.getTime())/1000.0) + ” seconds” );
$(“#totalTime”).text( Number( (endTime.getTime() – startTime.getTime())/1000.0) + ” seconds” );
});
</script>
</head>
<body>
<div id=”jqxgrid”></div>
<input style=”margin-top: 10px;” value=”Remove Filter” id=”clearfilteringbutton” type=”button” /><br /><br />
<div>Data: <span id=”dataTime”></span></div><br />
<div>Adapter: <span id=”sourceTime”></span></div><br />
<div>Hide Available: <span id=”hideTime”></span></div><br />
<div>Pin Name: <span id=”pin1Time”></span></div><br />
<div>Pin Product: <span id=”pin2Time”></span></div><br />
<div>Pin Ship Date: <span id=”pin3Time”></span></div><br />
<div>Grid Total: <span id=”gridTime”></span></div><br />
<div>Grand Total: <span id=”totalTime”></span></div>
</body>
</html>Hi rgburnap,
Each of the operations that you make will render the Grid so in the “ready” callback in the posted code you render the Grid 4 additional times and that will take some time especially when you have 20+ Checkbox columns. When you need to make several operations at once, you should use the Grid’s “beginupdate” before the operations and “endupdate” after that. Another option is to use the columns properties like “hidden”, “pinned” when you initialize the Grid, not after it is rendered in its “ready” callback. You can learn more about the columns properties in the Grid’s API documentation. Click the “columns” property to expand its settings.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comPeter,
Thanks so much. I just couldn’t find the right place in the documentation. My bad.
Roy
-
AuthorPosts
You must be logged in to reply to this topic.