Available in the Full Version
Data Grid - Performance
The igGrid control provides several options and features that increase its performance.
- The Virtualization feature improves rendering time if the grid has a large set of records.
- The remote Paging feature allows the grid to request its data from the server in small chunks per page.
- The remote Filtering feature executes the search operation on the server and returns the result to the client.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
5000
10
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<!-- Used to add markup and provide logging
functionality for the API Explorer and API Viewer UI -->
<script src="/js/apiviewer.js"></script>
<style>
.s-clearfix {
content: "";
display: table;
clear: both;
}
.w100 {
width: 100%;
}
.w33 {
width: 33.3%;
}
.mb10 {
margin-bottom: 10px;
}
.ml5 {
margin-left: 5px;
}
.min-173 {
min-width: 173px;
}
.pr30 {
padding-right:30px;
}
.border-box {
box-sizing: border-box;
}
.igui-filter-f-left {
float: left;
}
.igui-filter-f-right {
float: right;
}
.igui-filter-modul {
margin: 0 0 15px 0;
border:1px solid #f1f1f1;
padding: 10px;
}
.igui-filter-section {
margin-bottom: 20px;
}
.d-block {
display: block;
}
.igui-filter-checkbox label {
cursor: pointer;
}
</style>
</head>
<body>
<div class="w100 igui-filter-section s-clearfix">
<div class="w33 min-173 pr30 border-box igui-filter-f-left">
<div class="igui-filter-modul">
<div class="mb10 w100 s-clearfix">
<label class="igui-filter-f-left">Rows Count: </label>
<span class="igui-filter-f-right" id="rowsLbl">5000</span>
</div>
<div id="dataCount"></div>
</div>
<div class="igui-filter-modul">
<div class="mb10 w100 s-clearfix">
<label class="igui-filter-f-left">Columns Count: </label>
<span class="igui-filter-f-right" id="colsLbl">10</span>
</div>
<div id="colCount"></div>
</div>
</div>
<div class="min-173 w33 pr30 border-box igui-filter-f-left igui-filter-checkbox">
<div class="mb10 s-clearfix">
<input class="mr5 igui-filter-f-left" id="pagingCheck" type="checkbox"/>
<label class="ml5 igui-filter-f-right" for="pagingCheck">Enable Paging </label>
</div>
<div class="mb10 s-clearfix">
<input class="igui-filter-f-left" id="filteringCheck" type="checkbox" />
<label class="ml5 igui-filter-f-right" for="filteringCheck">Enable Filtering </label>
</div>
<div class="mb10">
<label class="mb10 d-block" for="virt">Virtualization Type: </label>
<input id="virt" type="text" />
</div>
</div>
<div class="w33 igui-filter-f-left">
<div>
<button id="btnRefresh" type="button">Rebind the grid</button>
</div>
</div>
</div>
<table id="grid"></table>
<div class="api-viewer"></div>
<script>
var apiViewer = new $.ig.apiViewer();
$(function () {
var dataBind = true,
startRender,
endRender,
rowsRendering,
rowsRendered,
dataFetching,
dataFetched,
filtering,
paging,
virt,
opts = {};
function setUpOptions(virt, paging, filtering, colCount) {
var opts = {}, columns = [], features = [], cols;
columns.push({ headerText: "ID", key: "ID", dataType: "number", width: "200px" });
columns.push({ headerText: "First Name", key: "FirstName", dataType: "string", width: "200px" });
columns.push({ headerText: "Last Name", key: "LastName", dataType: "string", width: "200px" });
columns.push({ headerText: "Company", key: "Company", dataType: "string", width: "200px" });
columns.push({ headerText: "Email", key: "Email", dataType: "string", width: "200px" });
columns.push({ headerText: "Position", key: "Position", dataType: "string", width: "200px" });
columns.push({ headerText: "Age", key: "Age", dataType: "number", width: "200px" });
columns.push({ headerText: "Address", key: "Address", dataType: "string", width: "200px" });
columns.push({ headerText: "Phone", key: "Phone", dataType: "string", width: "200px" });
columns.push({ headerText: "Picture", key: "Picture", dataType: "string", width: "200px" });
columns.push({ headerText: "Is Active", key: "IsActive", dataType: "bool", width: "200px" });
columns.push({ headerText: "Balance", key: "Balance", dataType: "string", width: "200px" });
columns.push({ headerText: "Eye Color", key: "EyeColor", dataType: "string", width: "200px" });
columns.push({ headerText: "Registered", key: "Registered", dataType: "bool", width: "200px" });
columns.push({ headerText: "Latitude", key: "Latitude", dataType: "number", width: "200px" });
columns.push({ headerText: "Longitude", key: "Longitude", dataType: "number", width: "200px" });
columns.push({ headerText: "Tags", key: "Tags", dataType: "string", width: "200px" });
columns.push({ headerText: "Greeting", key: "Greeting", dataType: "string", width: "200px" });
columns.push({ headerText: "GUID", key: "GUID", dataType: "string", width: "200px" });
columns.push({ headerText: "Index", key: "Index", dataType: "number", width: "200px" });
cols = columns.slice(0, colCount);
opts["columns"] = cols;
opts["responseDataKey"] = "d.results.Records";
opts["responseTotalRecCountKey"] = "d.results.TotalRecordsCount";
opts["autoGenerateColumns"] = false;
opts["dataSource"] = "https://www.igniteui.com/api/gridperformance?callback=?";
if (virt !== "none") {
opts["rowVirtualization"] = true;
opts["virtualizationMode"] = virt;
};
opts["width"] = "100%";
opts["height"] = "500px";
if (paging) {
features.push({ name: "Paging", type: "remote", pageIndexUrlKey: "page", pageSizeUrlKey: "pageSize", recordCountKey: "d.results.TotalRecordsCount" });
}
if (filtering) {
features.push({ name: "Filtering", type: "remote", filterExprUrlKey: "filter" });
}
opts["features"] = features;
opts["rendering"] = function (evt, ui) {
startRender = new Date().getTime();
};
opts["rendered"] = function (evt, ui) {
endRender = new Date().getTime();
apiViewer.log("The whole grid was rendered for : " + (endRender - startRender) / 1000 + " seconds.");
apiViewer.log("");
};
opts["rowsRendering"] = function (evt, ui) {
rowsRendering = new Date().getTime();
};
opts["rowsRendered"] = function (evt, ui) {
rowsRendered = new Date().getTime();
apiViewer.log("Rows rendered for : " + (rowsRendered - rowsRendering) / 1000 + " seconds.");
};
opts["dataBinding"] = function (evt, ui) {
dataFetching = new Date().getTime();
};
opts["dataBound"] = function (evt, ui) {
dataFetched = new Date().getTime();
apiViewer.log("Data fetched for : " + (dataFetched - dataFetching) / 1000 + " seconds.");
};
return opts;
}
$.ajaxSetup({
beforeSend: function (jq, settings) {
var rowsCount = $("#dataCount").slider("value"),
colsCount = $("#colCount").slider("value"),
filtering = $("#filteringCheck").igCheckboxEditor("value"),
paging = $("#pagingCheck").igCheckboxEditor("value"),
virt = $("#virt").igCombo("value");
if (settings.url.indexOf("api/gridperformance") !== -1) {
settings.url += "&rowscount=" + rowsCount;
settings.url += "&databind=" + dataBind;
settings.url += "&colscount=" + colsCount;
if (settings.url.indexOf("pageIndex") !== -1 || settings.url.indexOf("filter") !== -1) {
dataBind = false;
}
}
},
});
$("#dataCount").slider({
min: 1000,
max: 20000,
step: 1000,
value: 5000,
slide: function (event, ui) {
$("#rowsLbl").html(ui.value);
}
});
$("#colCount").slider({
min: 1,
max: 20,
step: 1,
value: 10,
slide: function (event, ui) {
$("#colsLbl").html(ui.value);
}
});
$("#btnRefresh").igButton({
click: function (evt, args) {
dataBind = true;
filtering = $("#filteringCheck").igCheckboxEditor("value");
paging = $("#pagingCheck").igCheckboxEditor("value");
virt = $("#virt").igCombo("value");
colsCount = $("#colCount").slider("value");
opts = setUpOptions(virt, paging, filtering, colsCount);
$(evt.target).igButton("option", "disabled", true);
$("#grid").igGrid("destroy");
opts.dataBound = function () {
$(evt.target).igButton("option", "disabled", false);
};
$("#grid").igGrid(opts);
}
});
$("#virt").igCombo({
dataSource: [
"continuous",
"none",
"fixed"
],
mode: "dropdown"
});
$("#pagingCheck").igCheckboxEditor();
$("#filteringCheck").igCheckboxEditor();
filtering = $("#filteringCheck").igCheckboxEditor("value");
paging = $("#pagingCheck").igCheckboxEditor("value");
virt = $("#virt").igCombo("value");
colsCount = $("#colCount").slider("value");
opts = setUpOptions(virt, paging, filtering, colsCount);
$("#grid").igGrid(opts);
});
</script>
</body>
</html>