Grid-Pagination is broken when inside a Tabstrip

3 Answers 252 Views
Grid TabStrip
Yusup
Top achievements
Rank 1
Yusup asked on 11 Jan 2024, 11:40 AM

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>

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 16 Jan 2024, 06:48 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
0
ONITdev
Top achievements
Rank 2
Iron
answered on 13 Feb 2024, 12:04 PM

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

0
Martin
Telerik team
answered on 16 Feb 2024, 10:09 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Casper Abel Holmegaard
Top achievements
Rank 1
commented on 06 Mar 2025, 02:03 PM

It would seem the example you just provided didnt solve the issue only if you are on the page when you load the grid or have a refresh call everytime you change pages
Martin
Telerik team
commented on 11 Mar 2025, 08:57 AM

Hello, 

I assume you were referring to the Pager in the second Grid not rendering as expected. I have modified the example accordingly so that both pagers in the Grids are displayed correctly. Let me know if I am missing something from the issue.

Tags
Grid TabStrip
Asked by
Yusup
Top achievements
Rank 1
Answers by
Martin
Telerik team
ONITdev
Top achievements
Rank 2
Iron
Share this question
or