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
Hello Bahukhandi,
I suggest you to read the following article and especially the "Best Practices" section of it, where I believe you can find an answer of your issue: https://www.igniteui.com/help/iggrid-performance-guide
Essentially you may use virtualization (both row and column) in your case instead of Paging, because virtualization is recommended with 1000-10000 records and if you want to handle more data, then remote Paging should be used. Another important thing is to enable gzip in your web server. This will affect both download times and bandwidth consumption..
Please read the above mentioned article, I think you will find it very helpful and if you need further assistance, then let me know.
Hi Tsanna.. Thanku verry much for your response..
I have used 15.2 version component, OS - window, browser- chrome, Firefox latest..
I have used igHierarchicalGrid instead of igGrid so please provide me help how to improve first time load igHierarchicalGrid as your refrence i have put some code on below... On my local system it worked good average load time is 4-5 sec but on server it is too slow 20-25 sec... Currently i have used paging with type : "Local"...
$("#incGrid").igHierarchicalGrid({ dataSource: '@Url.Action("GetResults")' , localSchemaTransform: false, autoGenerateColumns: false, primaryKey: "Id", persist: false, enableUTCDates: false, width: "100%", responseDataKey: "SearchResults", columns: [ { key: "Id", dataType: "number", hidden: true, width: "0%" }, { key: "gid", headerText: "Id", width: "6%" }, { key: "Name", dataType: "string", headerText: "Name", width: "8%" }, { key: "Supervisor Name", dataType: "string", headerText: "Supervisor", width: "9%" }, { key: "Title", headerText: "Title", width: "7%" }, { key: "Dept", headerText: "Dept", width: "8%" }, { key: "Union", headerText: "Union", width: "8%" }, { key: "Date", headerText: "Date", dataType: "date", format: "MM/dd/yyyy", width: "7%"}, { key: "Status", headerText: "Status", width: "8%" }, { 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",
}, { name: 'GroupBy', type: "local"
}, { name: 'Filtering', mode: "advanced", type: "local", filterExprUrlKey: "filter", filterDialogContainment: "window", filterDialogFilterDropDownDefaultWidth: 100,
}, { name: 'Selection' }, { name: "Resizing" }, { name: "Paging", type: "local", pageSize: 15, recordCountKey: "TotalCount", pageSizeUrlKey: "pageSize", pageIndexUrlKey: "pageNumber" }, { name: "ColumnMoving", columnMovingDialogContainment: "window" } ] });
Thanks,
Bahukhandi Pankaj
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.