Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
pankaj bahukhandi
30
Bad performance loading time igGrid with only 874 json records records on first time page load
posted

I have a data set of around 1000 rows, 14 columns and for the table to load onto the page it takes about 17 seconds or more on avg. I'm wondering if there is anyways to optimize this. Its take too much time on first time page load after that i have used type: "local" its worked fast but first time it load whole time take too much time..

I have used virtualizationMode: "continuous" its no effect on load please help & provide any solution below is my complete code...

console.time("time");
$("#incGrid").igGrid({
dataSource: '@Url.Action("GetSearchResults")' + EmployeeFilter,
autoGenerateColumns: false,
primaryKey: "Id",
enableUTCDates: false,
rowVirtualization: true,
virtualizationMode: "continuous",
height: "800px",
width: "100%",
responseDataKey: "SearchResults",
columns: [
{ key: "Id", dataType: "number", hidden: true, width: "0%" },
{ key: "IncId", headerText: "Id", width: "6%" },
{ key: "EmployeeName", dataType: "string", headerText: "Name", width: "8%" },
{ key: "SupervisorName", dataType: "string", headerText: "Supervisor", width: "9%" },
{ key: "Title", headerText: "Title", width: "7%" },
{ key: "Department", headerText: "Dept", width: "8%" },
{ key: "Union", headerText: "Union", width: "8%" },
{ key: "IncidentDDate", headerText: "Date", dataType: "date", format: "MM/dd/yyyy", width: "7%"},
{ key: "Status", headerText: "Status", width: "8%" },
{ key: "Abeyance", headerText: "Abeyance", width: "7%"},
{ key: "Action", headerText: "Action", width: "8%" },
{ key: "Details", headerText: "Details", width: "16%" },
{
headerText: "",
key: "Link",
dataType: "string",
unbound: true,
template: "<button class='btn btn-hre viewIncident' data-id='${Id}'>View</button>"

},
{ key: "FirstName", hidden: true },
{ key: "LastName", hidden: true }
//{ key: "FromDate", hidden: true },
//{ key: "ToDate", hidden: true }
],
features: [
{
name: 'Sorting',
type: "local",
mode: "single",
sortUrlKey: "sort"

},
{
name: 'GroupBy',
type: "local",
persist: false,
groupedColumnsChanged: function (evt, ui) {
if (ui.groupedColumns.length > 0) {
$('#collapseAll').show();
if(ui.groupedColumns.length==1){
$("#expandAll").val("Expand All " + ui.groupedColumns[0].col.headerText);
$("#collapseAll").val("Collapse All " + ui.groupedColumns[0].col.headerText);
}else{
$("#expandAll").val("Expand All");
$("#collapseAll").val("Collapse All");
}
} else {
$('#collapseAll').hide();
$('#expandAll').hide();

}
}

},
{
name: 'Filtering',
mode: "advanced",
type: "local",
filterExprUrlKey: "filter",
filterDialogContainment: "window",
filterDialogFilterDropDownDefaultWidth: 100,
persist: true

},
{
name: 'Selection'
}
,
{
name: "Paging",
type: "local",
pageSize: 20,
recordCountKey: "TotalCount",
pageSizeUrlKey: "pageSize",
pageIndexUrlKey: "pageNumber"
},
{
name: "ColumnMoving",
columnMovingDialogContainment: "window"
}
],
autoGenerateLayouts: false,
columnLayouts: [
{
key: "Notices",
autoGeneratedColumns: false,
showHeader: false,
columns: [
{ key: "Id", hidden: true },
{ key: "Title", hidden: true },
{
headerText: "Notice #",
key: "Link",
dataType: "string",
unbound: true,
template: "<a href='#' class='viewIncident' data-step='0' data-id='${Id}'>Notice of ${Title}</a>"

},
{ key: "RouteStageName" },
{ key: "NoticeDate" }
]
}
]
});
console.timeEnd("time");

Thanks in advance!!

Pankaj Bahukhandi

Parents
No Data
Reply
  • 15320
    Offline posted

    Hello Pankaj,

    On first sight of the provided code I noticed that your grid has hierarchical structure but you created it using igGrid widget. Please use igHierarchicalGrid instead. If you want to optimize your grid, there are two features: virtualization and paging. There is no need to use them both, you can use either virtualization or paging. Another thing to note is that when you have more columns you may turn on row and column virtualization at once by using virtualization: true option.

    Please tell me some details about the environment you're testing on like: OS, browser and version of the components.

Children