Kendo Editable Grid Row Height Behaviour Change

[David]

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

[Ivan Danchev]

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

[David]

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

[Ivan Danchev]

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

[Ivan Danchev]

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