Grid error config 'pageable' error bootstrap tabs

1 Answer 25 Views
Grid
VnDevil
Top achievements
Rank 2
VnDevil asked on 25 Aug 2022, 07:57 AM

Hi Telerik,

I created a demo code for error of Kendo Grid for jQuery with Bootstrap 5 error when settings 'pageable', please check and fix this

Link online: https://dojo.telerik.com/@vndevil/ICAPeBeg

 


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.2.802/js/kendo.all.min.js"></script>

    <!-- BEGIN Bootstrap 5.0.2 -->
    <!-- PHẢI để ở trên này, trước đống css tự viết ở dưới ^_^ -->
    <!-- CHƯA DÙNG ĐƯỢC BOOTSTRAP 5 do nó bỏ hàm Tooltip, đang chờ phiên bản udpate mới -->
    <link href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="preload stylesheet" as="style"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <script src="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <!-- END Bootstrap 5.0.2 -->
</head>

<body>





    <div class="mb-3">
        <h1>Grid normal<h1>
                <div id="grid"></div>
                <div id="grid2"></div>

    </div>

    <div class="mb-3">
        <h1>Grid error config 'pageable' error bootstrap tabs<h1>

                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                            type="button" role="tab" aria-controls="home" aria-selected="true">Grid 3 pageable config
                            error</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">Grid 4 pageable
                            config error</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
                            type="button" role="tab" aria-controls="contact" aria-selected="false">Grid 5 pageable
                            config error</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <div id="grid3"></div>
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div id="grid4"></div>
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <div id="grid5"></div>
                    </div>
                </div>

    </div>

    <script>
        var gridConfig = {
            columns: [
                { field: "productName" },
                { field: "category" }
            ],
            dataSource: [
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" }
            ],
            pageable: {
                pageSize: 5,
                buttonCount: 3,
                messages: {
                    display: '{0} - {1} of {2:#,##} items'
                }
            }
        };

        $("#grid").kendoGrid(gridConfig);
        $("#grid2").kendoGrid(gridConfig);
        $("#grid3").kendoGrid(gridConfig);
        $("#grid4").kendoGrid(gridConfig);
        $("#grid5").kendoGrid(gridConfig);
    </script>
</body>

</html>

1 Answer, 1 is accepted

Sort by
0
Accepted
Georgi Denchev
Telerik team
answered on 29 Aug 2022, 02:29 PM

Hello, VnDevil,

Thank you for providing a Dojo sample.

Problem

The observed problem in the second and third tabstrips occurs because the Grid's <div> element is not visible when the Grid is initialized. This behavior is noted in the Hidden Containers documentation.

The pager may not appear or may be the smallest responsive pager instead of the full one

Solution

You should either initialize grid4 and grid5 after you click on the tabstrip button, or you should call the resize() method when the tabstrip is changed.

// When the second tabstrip is clicked(activated), call the resize method.
$("#grid4").data('kendoGrid').resize();

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
VnDevil
Top achievements
Rank 2
Answers by
Georgi Denchev
Telerik team
Share this question
or