Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 23 Oct 2023 10:51 by ADMIN
Andrew
Created on: 09 Oct 2023 03:24
Category: Kendo UI for jQuery
Type: Bug Report
1
Grid Control pager renders in mobile mode in inactive tab

I have a tab control, and a number of the related views contain grids.

If a grid is created in a tab view that is not visible, then the grid pager renders as if it was on a tiny mobile screen. The only way you can make it render the pager correcly is to manually resize the browser window after the grid has become visible.

I have a simple demonstration here: https://dojo.telerik.com/eCuQAqEm

The behavior is the same in both Chrome and Firefox.


<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/tabstrip/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-main.css" rel="stylesheet" />
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">
                <div class="demo-section">
                        <div id="tabstrip">
                            <ul>
                                <li class="k-active">
                                    Visible Grid
                                </li>
                                <li>
                                   Hidden Grid
                                </li>
                            </ul>
                           
                            <div>
                              <div id="visibleGrid"></div>
                            </div>
                            <div>
                              <div id="hiddenGrid"></div>
                            </div>
                        </div>
                </div>
            <script>
              	const data = [];
              	for (let i = 0; i < 100; ++i) {
                  data.push({
                    columnOne : `Item ${i} Column One`,
                    columnTwo : `Item ${i} Column Two`
                  });
                }
              	const gridOptions = {
                	dataSource: data,
                  pageable: {
                    refresh: true,
                    pageSize: 10,
                    pageSizes: [10, 20, 30]
                  },
                };
                $(document).ready(function() {
                    $("#tabstrip").kendoTabStrip();
                    $("#visibleGrid").kendoGrid(gridOptions);
                  	$("#hiddenGrid").kendoGrid(gridOptions);
                });
              
            </script>
        </div>
</body>
</html>

3 comments
ADMIN
Nikolay
Posted on: 23 Oct 2023 10:51

Hi Andrew,

Thank you for the follow-up.

Indeed, you are correct and this is a bug. It has been logged already and you can track its progress and check for a current workaround in the below GitHub link:

Please let me know if you have any questions.

Regards,
Nikolay
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! 
Andrew
Posted on: 16 Oct 2023 23:26

I totally disagree with the decision to decline fixing it.

You are saying that responsive mode does not work if the grid is behind a tab.

That's a straight out bug!

 

 

ADMIN
Nikolay
Posted on: 13 Oct 2023 13:07

Hi Andrew,

When the Grid Pager is placed within other elements like Window or TabStrip that can be collapsed/invisible when the page loads, the width cannot be calculated by the Pager properly and it gets into "small" mode because the Width comes like 0.

To overcome this you could disable the responsiveness of the Pager:

 

            const gridOptions = {
                  dataSource: data,
                  pageable: {
                    responsive: false,
                    refresh: true,
                    pageSize: 10,
                    pageSizes: [10, 20, 30]
                  }
                };

 

Dojo demo: https://dojo.telerik.com/eCuQAqEm/2

Please let me know if you have any questions.

Regards,
Nikolay
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! 
Create an account Log In
View
Type
Status
Category