This is a migrated thread and some comments may be shown as answers.
Kendo UI grid pager not displaying properly in SASS mode
7 Answers 318 Views
This is a migrated thread and some comments may be shown as answers.
Syleps
Top achievements
Rank 1
Veteran
Syleps asked on 28 Jan 2019, 10:01 AM

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

7 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 30 Jan 2019, 09:27 AM
Hello Thierry,

Generally speaking, our builds are depending on the PostCSS Calc package:
Having said that, you could also install the Kendo UI 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:
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
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.
0
sroussos
Top achievements
Rank 2
answered on 23 Apr 2019, 12:54 PM

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

 

 

 

 

0
Preslav
Telerik team
answered on 24 Apr 2019, 11:24 AM
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:
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
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.
0
Lee
Top achievements
Rank 1
Veteran
Iron
answered on 10 Mar 2020, 05:19 PM

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. 

0
Preslav
Telerik team
answered on 12 Mar 2020, 10:39 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Øyvind
Top achievements
Rank 1
answered on 22 Jun 2020, 12:36 PM

The

e.sender.resize(true);

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

0
Preslav
Telerik team
answered on 24 Jun 2020, 11:57 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Syleps
Top achievements
Rank 1
Veteran
Answers by
Preslav
Telerik team
sroussos
Top achievements
Rank 2
Lee
Top achievements
Rank 1
Veteran
Iron
Øyvind
Top achievements
Rank 1
Share this question
or