Kendo UI grid pager not displaying properly in SASS mode

[Syleps]

Hi,

I have some problem displaying the grid pager buttons :

The 'next page' and 'last page' buttons are not always displayed on Chrome with the Material theme, and are not displayed on IE11 with the 2 themes.

 

I use last version on Kendo MVC 2919.1.115, and I downloaded the latest SASS version for Material and Default themes (via NPM)

The problem comes from the margin-left which is calculated with this formula in some cases:

$pager-numbers-margin: calc(
    #{add-three( 2 * $button-border-width, 2 * $button-padding-y, $button-line-height * 1em, 2)} +
    #{$pager-padding-x} +
    #{2 * $button-border-width}
) !default;

 

In Material Theme, $button-border-width=0 => Crash with Chrome and IE11

In Default Theme, $button-border-width=1px => Crash on IE11 (IE11 does not accept the use of several "calc", even the use of more than 2 terms in the "calc")

(see attached files)

 

Question : What makes my pager in k-pager-sm and not in k-pager?

 

 

Regards

Thierry

[Preslav]

Hello Thierry,

Generally speaking, our builds are depending on the PostCSS Calc package:

• https://www.npmjs.com/package/postcss-calc

Having said that, you could also install the Kendo UI Theme Tasks:

• https://www.npmjs.com/package/@progress/kendo-theme-tasks

and build the desired theme via its API.

Another possible solution is to clone our repo: https://github.com/telerik/kendo-themes locally and build the themes there by following these steps:

• https://github.com/telerik/kendo-themes#working-with-this-monorepo

Further, about the k-pager-sm(k-pager-lg, k-pager-md), these classes are assigned dynamically based on the width of the Pager. We are using them to make the component responsive. This feature was released with the 2019 R1 release. 


Regards,
Preslav
Progress Telerik

[sroussos]

Hello Preslav,

Is there an option to disable the Reponsive feature of the pager ? I always want to show the pageSize Combo to the user even wrapped to the next line.

Here you can see a sideffect of the responsive feature.

https://www.screencast.com/t/vIxCYG9q 

Although it looks good in one line the pagesize Combo is hidden and a big button popups instead of pageNumbers

 

 

 

 

[Preslav]

Hello Sotiris,

This functionality is already implemented, and it will be included in our next release(mid-May).

At this stage, you could test it in our latest internal build:

• https://www.telerik.com/account/product-download?product=KENDOUICOMPLETE

After including the latest scripts, add the following configuration to the pager:

responsive: false

If you decide to test this functionality, please, share your feedback with us.


Regards,
Preslav
Progress Telerik

[Lee]

I am noticing that in the kendo UI jquery version the .k-pager-lg class is not always re-applied when the grid is resized. I am able to reproduce the issue on my end by first loading the screen. The initial load of the screen shows the class .k-pager-sm. My grid at this time has a width of 1682px. The document width is 1920px. If I grab the tab from the Chrome browser and move it to its own window I the width shrinks while dragging but then expands back to 1920px (with a grid of 1682px) as expected and as it was before I dragged the tab. At this time the k-pager-sm class is removed and never re-applied. The same is true for the k-pager-lg class. My new classlist looks like this: "k-pager-wrap k-grid-pager k-widget k-floatwrap". I don't consistently get the k-pager-sm class. Sometimes I get the k-pager-lg class with the same data and screen size. The problem with this is that sometimes I have a dropdown box with page numbers and other times I have a circle with a page number in it. 

My code for building the table is as follows (I changed some variable names for privacy reasons): 

$("#myTable").kendoGrid({
    dataSource: {
        data: myData,
        pageSize: 10
    },
    rowTemplate: kendo.template($("#rowTemplate").html()),

    detailInit: detailInit,
    sortable: true,
    pageable: true,
    dataBound: function (e) {
        var items = e.sender.items();
        items.each(function () {
            var row = $(this);
            var dataItem = e.sender.dataItem(row);
            var id = dataItem.myID;
            var subRows = $.grep(previousOnes, function (e) { return e.myID === id; });
            if (subRows.length === 0) {
                row.find(".k-hierarchy-cell").html("");
            }
        });
        $("#pageLoadingContainer").hide();
        $("#roundData").fadeIn();
    }
});

 

This is the detailInit function: 

function detailInit(e) {
    $("<div class='hide-table-header' />").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: previousOnes,
            filter: { field: "myID", operator: "eq", value: e.data.myID }
        },
        rowTemplate: kendo.template($("#detailTemplate").html()),
        scrollable: false,
        columns: [
            { title: "", width: "100px" },
            { field: "dateTimeStamp", title: Date", width: "110px" },
            { field: "name", title: "Name", width: "110px" },
            { field: "field1", title: "Field 1", width: "110px" },
            { field: "annual", title: "Annual", width: "110px" },
            { field: "Value", title: "Value", width: "110px" },
            { field: "theID", title: "The ID", width: "110px" }
        ]
    });
}

 

Note: I changed some field names from what they actually are in the code for privacy reasons. 

[Preslav]

Hello Lee,

Usually, this behavior is observed when the Grid is initialized in a hidden container. Could you please check if resizing the Grid during the dataBounde event handler fixes the problem? The code could look like:

  dataBound: function(e) {
      e.sender.resize(true);
  }

I look forward to hearing from you.

 

Regards,
Preslav
Progress Telerik

[Øyvind]

The

e.sender.resize(true);

worked for me, but it feels a bit "hacky". 

[Preslav]

Hello Øyvind,

I understand that using a method to resize the grid does not feel okay. However, if it is initialized in a hidden container, there is no way for us to know what would be the height and the width when the Grid is shown. Thus, we will need to use the "resize" method.

 

Regards,
Preslav
Progress Telerik