Kendo UI grid pager not displaying properly in SASS mode

8 posts, 0 answers
  1. Syleps
    Syleps avatar
    37 posts
    Member since:
    Nov 2013

    Posted 28 Jan 2019 Link to this post

    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

  2. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 30 Jan 2019 Link to this post

    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.
  3. sroussos
    sroussos avatar
    7 posts
    Member since:
    Nov 2009

    Posted 23 Apr 2019 in reply to Preslav Link to this post

    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

     

     

     

     

  4. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 24 Apr 2019 Link to this post

    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.
  5. Lee
    Lee avatar
    78 posts
    Member since:
    May 2019

    Posted 10 Mar 2020 Link to this post

    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. 

  6. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 12 Mar 2020 Link to this post

    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.
  7. Øyvind
    Øyvind avatar
    1 posts
    Member since:
    Mar 2013

    Posted 22 Jun 2020 in reply to Preslav Link to this post

    The

    e.sender.resize(true);

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

  8. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 24 Jun 2020 Link to this post

    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.
Back to Top