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
igGrid not retaining page management after rebinding the datasource
posted

Hello,

I have  igGrid where am showing loan details on pageload,User can search  expressions in multiple columns at one go.when the user searches for particular expression we display results in the grid. Here we are rebinding the  grid  with different datasource for search results.everythings seems to be ok but the paging management.below are the steps which  describes  by issue.

1.Initially,on the pageload the grid diaplys all the records.lets suuppose User navigates to 2nd page.Here at the left-Bottom of pager it shows "51-100 of 371     records".

2.Next,user searches for the expressions from the search textbox and clicks the search button(we are rebinding grid with search results using jquery Ajax).


3. The problem comes here....after we rebind the grid ,the grid doesnot display any data,shows blank.this  happens because of pager. At the pager grid shows "51-3 of records" instead of  "1-3 of 3 records".

4.Again,if we click "go To first record" icon,the grid becomes normal and displays expected results.


i tried to change the current pageIndex on search button click using the following code,but no use.:

$(“#grid1”).igGridPaging(“pageIndex”, 0);

On pageload we are calling the following function ....
 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,
                
                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'
            }

                ],

            });



          
        });
        igloader1 = $.ig;
        MakeNormal();
    }

for search results am calling the following function

  function FilterLoanName() {
        var expr = $("#search").val();
        var countrecords = null;
        $('#igGridLoanPipeline_table_container_loading').css('visibility', 'visible');
        $('#igGridLoanPipeline_table_container_loading').css('display', 'block');
        if (expr != "Search for a loan...") {
            $.ajax(
                     {
                         url: '@Url.Action("PipeLineGridData", "Home")',
                         data: { "searchText": expr },
                         // contentType: "application/json; charset=utf-8",
                         datatype: 'json',
                         timeout: 100000,
                         type: "POST",
                         success: function (data) {
                             if (data.Records != null) {
                                 //   $('#igGridLoanPipeline').igGrid('destroy');
                                 // $("#gridProperty").show();
                                 $("#igGridLoanPipeline").igGrid({
                                     dataType: "JSON",
                                     dataSource: data.Records,
                                     responseDataKey: "Records"
                                 });
                                 //  ShowPipeLineGrid(data);

                                

                             }

                         },
                         error: function (data) {
                            
                         }
                     });
        }



my question is how can i get the normal paging state ,even after i search for the results.

 

Parents
No Data
Reply Children
No Data