Kendo Razor controls renders grid pager differently to KendoUI for JQuery - breaks styling

[Andrew]

I display grids with a page size control. In one page within my project it still looks fine - and this is where I create the grid using kendo ui for JQuery.

In the instances when I create it using MVC, there are styling errors. (See in the image how the number "10" is truncated.)

After much drilling into the HTML, I found the difference in how the Razor library creates the HTML elements, as opposed to how the JQuery creates the HTML elements.

JQuery generates the following element structure. Note that the k-pager-sizes element comes after the k-pager-numbers-wrap element

<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->
     <div class="k-pager-numbers-wrap">
             <!-- ... -->
     </div>
     <span class="k-pager-sizes k-label">
            <!-- The page-size picker goes here -->
     </span>
</div>

In contrast, the Kendo Razor libraries generates the following element structure, where the k-pager-sizes element falls inside the k-pager-numbers-wrap element:

<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->

     <div class="k-pager-numbers-wrap">
             <!-- ... -->
            <span class="k-pager-sizes k-label">
                  <!-- The page-size picker goes here -->
             </span>
     </div>

</div>

This breaks the styling. There is styling rule that imposes a minimum width on all buttons under .k-pager-numbers-wrap. This makes the drop-down arrow too wide, which causes the page size number to truncate.

    @each $size, $size-props in $kendo-pager-sizes {
        $_padding-x: k-map-get($size-props, padding-x);
        $_padding-y: k-map-get($size-props, padding-y);
        $_item-group-spacing: k-map-get($size-props, item-group-spacing);
        $_item-min-width: k-map-get($size-props, item-min-width);
        $_pager-dropdown-width: k-map-get($size-props, pager-dropdown-width);

        .k-pager-#{$size} {
            padding-inline: $_padding-x;
            padding-block: $_padding-y;
            gap: $_item-group-spacing;

            .k-pager-numbers-wrap {
                .k-button {
                    min-width: $_item-min-width;
                }

 

After writing this, I realize it might be more appropriate as a logged defect, which I've done here:

https://feedback.telerik.com/aspnet-mvc/1621268-kendo-razor-controls-renders-grid-pager-differently-to-kendoui-for-jquery-breaks-styling

 

 

[Ivan Danchev]

Hello Andrew,

Thank you for reporting this issue. I can confirm the difference in the rendering of the pager. Before we log it for fixing, could you please specify:

1. The version of the components you are using

2. The kendo theme that styles the components. I've tried a few different themes in this demo: https://demos.telerik.com/aspnet-mvc/grid/basic-usage and I didn't notice the number in the dropdown getting truncated.

Regards,
Ivan

[Andrew]

The MVC version I am using is 2023.2.718.545

I am generating the styles from SASS. I use the node package

I then have my own sass file, which imports the SASS from the node package kendo-theme-bootstrap.

 

    "@progress/kendo-theme-bootstrap": "^6.6.0",

Here's how I import the package in my own SASS file:

@import "@progress/kendo-theme-bootstrap/dist/all.scss";

[Ivan Danchev]

Andrew,

Posting here as well that we've confirmed the issue you've logged in the Feedback Portal and we've added it to the backlog for fixing.

Regards,
Ivan