Paging options not working

[Rey]

I am trying to use the paging options in my Ajax-enabled Grid but none of them are enabled.  The only thing I can get is the default paging controls.  I would like to see total records, page numbers, etc.  FYI, the grid does not automatically bind, it binds after a dataSource.read() call.

Tag Helper code:

    <kendo-grid name="grdResults" auto-bind="false">
        <datasource type="DataSourceTagHelperType.Ajax" page-size="25">
            <schema>
                <model id="id">
                    <fields>
                        . . . (omitted for brevity)
                    </fields>
                </model>
            </schema>
            <transport>
                <read url="Index?handler=Read" />
            </transport>
        </datasource>
        <toolbar>
            <toolbar-button name="excel"></toolbar-button>
        </toolbar>
        <excel all-pages="true" />
        <columns>
            . . . (omitted for brevity)
        </columns>
        <sortable enabled="true" />
        <pageable enabled="true"
            info="true">
        </pageable>
    </kendo-grid>

[Rey]

This is what I have and now works.  Paging options show and loading graphic shows.  I show the div, then read.  Also the responsive="false" helped.

Razor page:

    <kendo-grid name="grdResults" auto-bind="false">
        <datasource type="DataSourceTagHelperType.Ajax" page-size="25">
            <schema>
                <model id="Piid">
                    <fields>
                     ...
                    </fields>
                </model>
            </schema>
            <transport>
                <read url="Index?handler=Read" data="SearchParams" />
            </transport>
        </datasource>
        <toolbar>
            <toolbar-button name="excel"></toolbar-button>
        </toolbar>
        <excel file-name="excel.xlsx" all-pages="true" />
        <columns>
            ...
        </columns>
        <sortable enabled="true" />
        <pageable enabled="true" info="true" responsive="false">
        </pageable>
        <scrollable enabled="false" />
    </kendo-grid>

JavaScript:

function Search() { //triggered via button
    $("#divResults").show(); //show the div, then read()
    $("#grdResults").data("kendoGrid").dataSource.read();
}

[Alexander]

Hi Reynaldo,

I'm glad that the suggestions mentioned above helped you resolve the issue on your end. Thank you for sharing your updated solution with the community, it is greatly appreciated

[Alexander]

Hi Reynaldo,

Thank you for taking the time to share the relevant code snippet and screenshot that further depicts the observed behavior, it is greatly appreciated.

At first glance, I did not see anything obvious within the TagHelper Grid configuration that could potentially hinder the Grid's paging options.

Nevertheless, the sporadic behavior may potentially be caused due to the fact that the Grid component makes its initial rendering calculations based on its current status. Having this in mind, the Grid cannot assess whether it is within a hidden container or not which will result in miscalculation upon re-rendering. Would you please confirm whether or not you have a similar scenario on your end? 

A possible suggestion would be to recalculate the Grid dimensions, using the .resize() method to further readjust the layout of the component. 

Another suggestion would also be to configure the Pageable property to not be responsive:

<pageable enabled="true" info="false" responsive="false">
</pageable>

Please give these suggestions a try and let me know how it works out for you.

Kind Regards,
Alexander
Progress Telerik

[Rey]

In fact, the grid was in a hidden <div>.  I unhid the div and now the paging info works.  I want to show the div after because I don't want to show an empty grid until the user enters the search parameters and I do the read().  Also, the grid doesn't show the loading graphic at the first read(), only when I sort, etc.  The grid is just sitting there for like 10 seconds until the results come back.

[Alexander]

Hi Reynaldo,

The Loading Indicator behavior could again be related to the Grid making unsuccessful rendering calculations due to the hidden state of the component for its data items as well. Thus, a possible suggestion would also be to call the .refresh() method prior to the fetching of the Grid's data.

Regarding the experienced delay on your end, I tried mimicking the behavior within an isolated environment with a similar Grid configuration as yours but was unable to do so, as the Grid seems to successfully display its data accordingly without a delay when the data is fetched.

Here is a screencast that further illustrates this.

That being said, I am attaching the sample used for testing purposes. Could you please consider replicating the behavior within the attached sample and send it back for further examination? This will help me troubleshoot the issue locally and based on the obtained evidence, provide further guidance.

I look forward to hearing back from you.