Kendo Editable Grid Row Height Behaviour Change

5 posts, 0 answers
  1. David
    David avatar
    31 posts
    Member since:
    Sep 2019

    Posted 13 Mar 2020 Link to this post

    Hi,

    We recently updated our .NET Core web app from Kendo UI v2019.3.1023 to Kendo UI v2020.1.219. The kendo.bootstrap-v4.min.css file contains a change that produces some fairly drastic jitter and row height changes in editable grids with custom ClientTemplates:

    .k-grid .k-command-cell, .k-grid .k-edit-cell, .k-grid .k-grid-edit-row td {
        padding: calc(.75rem - (1.5em + .75rem + 2px - 1.5em)/ 2) .75rem
    }

     

    I have confirmed the issue is in the above css by removing it and observing that editable grid rows don't jitter and change height when you click on an editable cell. Is this a bug or was this an intended change in behaviour? What is the best / easiest way to completely remove this behaviour? There is nothing special about the grid other than the checkbox ClientTemplate:

    @(Html.Kendo().Grid(Model.Create)
                .Name("CreateGrid")
                .Navigatable()
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Events(events => events.Edit("OnCreateGridEdit"))
                .Columns(columns => ...

    Kind regards,

    David

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 18 Mar 2020 Link to this post

    Hello David,

    I tested the Grid with version 2020.1.219 and a column configured as shown below:

    columns.Bound(f => f.Create).ClientTemplate("<input type='checkbox' #= Create ? checked='checked' :'' # />");

    I did not notice any height changes: screenshot

    Please post your column configuration, so we can give it a try and check where the problem might be coming from.

    Regards,
    Ivan Danchev
    Progress Telerik

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
  3. David
    David avatar
    31 posts
    Member since:
    Sep 2019

    Posted 22 Mar 2020 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    As mentioned in the original post you have to click in an editable cell to observe the issue - it doesn't necessarily happen if you just click on the checkbox. It happens for all editable cells in grids - datepickers, textboxes, and most noticeably checkboxes. I changed our checkbox column configuration to match the one you posted and the issue is still evident. Please see the screenshot attached that clearly demonstrates the issue is related to the new padding calc for .k-grid .k-command-cell, .k-grid .k-edit-cell, .k-grid .k-grid-edit-row td. 

    As already mentioned, I have confirmed the issue is in the above css by removing it and observing that editable grid rows don't jitter and change height when you click in an editable cell. Is this a bug or was this an intended change in behaviour? What is the best / easiest way to completely remove this behaviour?

    Kind regards,

    David

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 25 Mar 2020 Link to this post

    Hi David,

    Thank you for elaborating more. I was able to reproduce the behavior in question with the Bootstrap v4 theme, as well as the Default v2 and the Material themes.

    Previously, the following padding values were used for the cells:

    .k-grid .k-command-cell, .k-grid .k-edit-cell, .k-grid .k-grid-edit-row td {
      padding: .75rem .75rem;
    }

    and this has been replaced with the CSS rule you posted. I will investigate further and will get back to you with more information, once we determine whether this should be logged as a bug.

    You can use the CSS rule above as a temporary workaround.

    Regards,
    Ivan Danchev
    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.
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 09 Apr 2020 Link to this post

    Hi David,

    We've decided to log this behavior for fixing. Here's the respective issue in our Github repo: https://github.com/telerik/kendo-themes/issues/1463

    I've updated your Telerik points, for your involvement in identifying this problem.

    Regards,
    Ivan Danchev
    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