Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 15 Jul 2021 07:17 by ADMIN
Dick
Created on: 12 Mar 2020 22:13
Category: Grid
Type: Bug Report
0
grid pager is not shown correctly when using bootstrap tabs

Since the 2019 R1 release k-pager-sm (k-pager-lg, k-pager-md) classes are assigned dynamically based on the width of the page to make the component responsive (as I understood from https://www.telerik.com/forums/kendo-ui-grid-pager-not-displaying-properly-in-sass-mode#wn92di5BakmHqrrMfViFxA)

When grids are used on bootstrap tabs (both boostrap 3 and 4) the k-pager-sm class is added incorrectly, causing the pagers on tabs other than the first to be displayed only partially.

A JSFiddle to demonstrate this: https://jsfiddle.net/nqjc4mbu/

The pager on the 1st tab:

And on the 2nd and 3rd tab:

 

(we've solved it with a workaround by dynamically removing the k-pager-sm class again on dataBound, but this shouldn't be necessary)

3 comments
ADMIN
Nikolay
Posted on: 15 Jul 2021 07:17

Hi Saurav,

For questions concerning Kendo UI for React, I would kindly ask you to submit a new thread choosing the correct product. This current thread is discussing the Kendo UI Grid for jQuery. There s a separate dedicated Kendo UI React team that will be best able to answer your questions.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Saurav
Posted on: 08 Jul 2021 09:58
How to solve above problem in react
ADMIN
Silviya Stoyanova
Posted on: 19 Mar 2020 13:52

Hello, Dick,

When the Grid is initialized in a hidden container, JavaScript cannot calculate the necessary space for the element properly. This is the reason the pager does not appear as expected.

I would suggest calling the kendo resize() method after the Grid widget becomes visible.

$(".nav-item").click(function(){
     setTimeout(function(){
             kendo.resize($("#myTabContent"));
       }, 200)         
    });
I hope this helps.

Kind Regards, Silviya Stoyanova Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Create an account Log In
View
Type
Status
Category