Hello,
I am using Infragistics Grid in my application to display records. The performance of grid seems to be okay when i bind upto 500 records.but if i bind more than 500 records,the grid is taking more time to load and display records. Right now i have the requirement to show "6000" records in my grid and the grid should not take more than 2 to 3 seconds to load. So, i decided to increase the performance of grid using Pagination process,that is when the user clicks on the page number i would like to get 50 records per page.i dont want to get all the records at once and make the performance slow.
My problem is how can i load the 6000 records using pagination process to improve the performance. Please Give me the solution
the following is the code snippet am using.
function ShowPipeLineGrid(data) { $.ig.loader({ scriptPath: "~/Scripts/InfragisticsjQueryMVC/common/js/", cssPath: "~/Scripts/InfragisticsjQueryMVC/Common/CSS/themes/metro/", resources: "igEditors,igGrid.Selection" }); $.ig.loader(function () { // $("#idcontacth4").hide(); $("#igGridLoanPipeline_container").empty(); // $("#gridContact_headers").hide(); $("#igGridLoanPipeline").igGrid({ height: 650, Width: 1380, primaryKey: "PKLoanID", columns: [ { headerText: "Active", key: "Active", dataType: "bool", width: "70px", format: "checkbox" }, { headerText: "ID", key: "FriendlyLoanID", dataType: "string", width: "80px" }, { headerText: "Loan Name", key: "LoanName", dataType: "string", width: "140px" }, { headerText: "Address", key: "Address", dataType: "string", width: "150px" }, { headerText: "Property Type", key: "PropertyType", dataType: "string", width: "100px" }, { headerText: "Loan Amount", key: "LoanAmount", dataType: "string", width: "130px", format: "currency" }, { headerText: "LTV", key: "TotalLTV", dataType: "string", width: "65px" }, { headerText: "Primary Contact", key: "PrimaryContact", dataType: "string", width: "130px" }, { headerText: "Transaction Type", key: "TransactionType", dataType: "string", width: "120px" }, { headerText: "Status", key: "Status", dataType: "string", width: "90px" }, { headerText: "Loan Officer", key: "LoanOfficer", dataType: "string", width: "110px" }, //{ headerText: "Stephan?", key: "IsStephanLoan", dataType: "bool", width: "70px", format: "checkbox" }, { headerText: "Date Modified", key: "UpdatedOn", dataType: "date", format: "MM/dd/yyyy", width: "130px" }, { headerText: "ID", key: "PKLoanID", dataType: "number", hidden: true }, ], autoGenerateColumns: false, //ClientDataSourceType(ClientDataSourceType.JSON) dataType: "JSON", dataSource: data.Records, responseDataKey: "Records", features: [ { showHeaderButton: false, showDropDownButton: false, compactRenderingMode: false, }, { name: "Filtering", allowFiltering: true, caseSensitive: false, }, { name: "Paging", type: "local", pageSize: 50 }, { name: "Sorting", type: "remote", mode: "single", columnSettings: [ { columnKey: "UpdatedOn", allowSorting: true, firstSortDirection: "ascending", currentSortDirection: "descending" }, ] }, { name: 'Selection', mode: 'row' } ], }); //$("#igGridLoanPipeline tr").dblclick(function (e) { // // var row = $('#gridProperty').igGridSelection('selectedRow'); // // var dataview = $('#gridProperty').data('igGrid').dataSource.dataView(); // // var cellValue = dataview[row.index]["FKPropertyID"]; // var pkloanid = $(this).attr("data-id"); // window.location = '/Loan/Summary?_pkLoanId=' + pkloanid; //}); }); igloader1 = $.ig; MakeNormal(); }
I recommend submitting a new thread with more details on your implementation so that we can better assist you.
when using paging remote group by feature only worked on single page can you provide me any solution to paging remote and group by worked on any condition either remote or local...
Hi,
you can refer to the performance guide for the grid:
http://help.infragistics.com/Help/NetAdvantage/jQuery/2013.1/CLR4.0/html/igGrid_Performance_Guide.html
Thanks,
Angel
Hello shahinkohan,Please let me know if you have any further questions regarding this issue.
Hello shahinkohan,Thank you for posting in our community. As far as I can see from the mark up the sorting is marked as remote but the paging is still local. Can you please try to set the paging behavior to be remote too. When the remote paging is used the grid automatically generates the proper request parameters (page number and page size). For more information regarding the paging behavior please visit our online documentation - http://help.infragistics.com/NetAdvantage/jquery/2012.2/CLR4.0?page=igGrid_Paging.html