Dynamically changing number of records per page

[Neill]

Hi,

I am trying to allow the user to dynamically change the number of records per page.

I have followed this thread: https://www.syncfusion.com/forums/116047/allowing-user-to-select-number-of-records-per-page

But receive an error on the code in the debugging console.

Code:

    $('#pageSettings').on('change', function (sender) {

        var model = $("#RowSelection").ejGrid("model"); //Will be called when a value is selected in dropdown

        var model1 = $("#RowSelection").ejGrid("getGridPager").ejPager("model");

        var newLastPage = Math.ceil(model.pageSettings.totalRecordsCount / sender.value);

        if (model1.currentPage > newLastPage)

            $("#RowSelection").ejGrid("getGridPager").ejPager("goToPage", newLastPage);

        $("#RowSelection").ejGrid({ "pageSettings": { pageSize: parseInt(sender.value) } }); //Setting the new page size

        renderDrop();

    });

The error: 

Uncaught ej.Grid: function/property - getGridPager does not exist

Error: ej.Grid: function/property - getGridPager does not exist

    at t.throwError (http://localhost:3082/Scripts/ej/ej.web.all.min.js:10:26895)

    at jQuery.fn.init.n.fn.(anonymous function) [as ejGrid] (http://localhost:3082/Scripts/ej/ej.web.all.min.js:10:21451)

    at HTMLSelectElement.<anonymous> (http://localhost:3082/Anatomy/ViewLinkedItems?includePartials=true&includeP…owSelectiondatetime_CustomDrop2=&RowSelectiondatetime_CustomValue2=:320:45)

    at HTMLSelectElement.dispatch (http://localhost:3082/Scripts/jquery-2.2.4.js:4737:27)

    at HTMLSelectElement.elemData.handle (http://localhost:3082/Scripts/jquery-2.2.4.js:4549:28)

Also I am unsure of the function renderDrop()

The other thread does not show its implementation.

Thanks,

N. Jamieson

[Neill]

As a side note, I am using the @Html.EJ().Grid() Helper, not the   $("#Grid").ejGrid() javascript way. Not sure if this would make a difference.

Neill

[Thavasianand Sankaranarayanan]

Hi Neill, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to change the page size dynamically. In your given code example you have used as “var model1 = $("#RowSelection").ejGrid("getGridPager").ejPager("model")”. getGridPager method name changed as getPager in the latest versions. This is the root cause of the issue. So, change the method name according to the suggestion. 

Refer the below code example. 

function onchange(sender) { 

            var model = $("#Grid").ejGrid("model"); //Will be called when a value is selected in dropdown 

            var model1 = $("#Grid").ejGrid("getPager").ejPager("model"); 

            var newLastPage = Math.ceil(model.pageSettings.totalRecordsCount / sender.value); 

            if (model1.currentPage > newLastPage) 

                $("#Grid").ejGrid("getPager").ejPager("goToPage", newLastPage); 

            $("#Grid").ejGrid({ "pageSettings": { pageSize: parseInt(sender.value) } }); //Setting the new page size 

            renderDrop(); 

        } 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:getpager 

Regards, 

Thavasianand S. 

[Neill]

Using "getPager" solved my problem.

Thank you.

Regards,

Neill

[Thavasianand Sankaranarayanan]

Hi Neill, 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

 

Regards, 

Thavasianand S.