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
1300
How to improve the grid performance using pagination process in infragistics
posted

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();
    }