Grid-Pagination is broken when inside a Tabstrip

[Yusup]

Hi.

I have a problem with the pagination grid when inside a tabstrip. and I don't know why this happens and how to solve it.

<div class="h-100">
        <div id="tabstrip" class="h-100">
            <ul>
                <li class="k-active">Arbeitsschritte</li>
                <li>Mitteilungen</li>
                <li>Wiedervorl</li>
            </ul>
            <div id="tab1" class="vh-100">
                <div id="grid1"></div>
            </div>
            <div class="vh-100">
                <div id="grid2"></div>
            </div>
            <div class="vh-100">
                <div id="grid3"></div>
            </div>
        </div>
    </div>

<script>
    $(document).ready(function () {
        $("#tabstrip").kendoTabStrip();

        $("#grid1").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: '100%',
            groupable: true,
            sortable: true,
            columnMenu: true,
            resizable: true,
            reorderable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });

        $("#grid2").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: '100%',
            groupable: true,
            sortable: true,
            columnMenu: true,
            resizable: true,
            reorderable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });

        $("#grid3").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: '100%',
            groupable: true,
            sortable: true,
            columnMenu: true,
            resizable: true,
            reorderable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });

    })
</script>

[Martin]

Hello, Yusup,

I tested the provided code in this Dojo example. The Grid's pager renders as expected. Could you please try to modify the example so that the issue can be observed? I will then be happy to investigate further.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[ONITdev]

Hi!

Using the last release (2024.1.130) the problem persists in Kendo Grid and Kendo TreeList. Just tried the example above and everything worked just fine, however if you use the select method (Tabstrip) to render the Grids / Treelists contained in tabstrip the pager won't work as expected. If you resize the window the pager is fixed in both cases (Grid and TreeList).

I modified your example to show the issue: https://dojo.telerik.com/ecUNIhED

For now, we've been fixing Grids using the following code:

activate: function (e) {
    $('#tab').find('[data-role=grid]').each(function () {
        if ($(this).find('.k-pager').length > 0) {
            $(this).data('kendoGrid').pager['_lastWidth'] = 30;
            $(this).data('kendoGrid').resize(true);
        }
    });
}

Hope this helps!

Best regards

[Martin]

Hello, 

Thank you for the additional information.

The pager behaviour occurs because when the Grid is created, the tab loading animation is not yet complete. Therefore the Grid assumes that there is not enough space to display its Pager properly. If you put the Grid creation in a setTimeout, the Pager will be rendered as expected based on the Grid's width. 

Another thing I would like to point out - the way you are currently creating the Grids in the two tabs, if you select them several times, the Grids will be created several times as well. That will result in an undesired behaviour. I would suggest adding a check if a Grid instance exists before creating the component. Please refer to this Dojo example on how to handle both issues.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik