Material Theme Grid Locked columns styled incorrectly

[Noah]

in the latest version of the material theme (4.16), Locked columns in the grid have lost their "elevated" (box shadow) styling and have a gray background instead of transparent.   If I revert to what i was using before, 4.12.2, it works fine again.  Not sure which version introduced the problem.

[Noah]

sorry, i put the wrong verisons on that.  The material theme versions are 3.10.2 to 3.14.0   somewhere in there the problem was introduced.

[Martin]

Hi Noah,

Indeed this the new design of the locked columns (introduced in v3.12.0 of the Material theme and v4.15.0 of the Default theme, etc.) as in the past only the Material theme was able to indicate the locked columns part. With the new design, now all themes can show which columns are locked.

In case the previous design fits best with the project requirements, using custom CSS to revert the changes is the way to go. For example:

.k-grid-lockedcolumns .k-grid-content, .k-grid-lockedcolumns .k-grid-header-wrap {
    box-shadow: inset 18px 0 4px -16px rgba(0,0,0,0.14);
}

.k-grid .k-grid-content-locked td, .k-grid .k-grid-header-locked th {
    border-left-color: transparent;
}

.k-grid .k-grid-content-locked td {
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

Let me know if I can provide any further assistance for Kendo UI for Angular.

Regards,
Martin
Progress Telerik

[Noah]

so it's intentional for it to look like this?

I'm not a huge fan of modifying the k-* styles because now I have to worry about keeping up with changes you make to component structures and class names.

Anyway, I got it looking pretty much like it used to.

I don't know if this was intentional either, but the rowClass property on the grid no longer styles the locked column cells.

 

[Martin]

Hi Noah,

Thank you for the provided feedback.

Yes, this is a planned changed.

The rowClass option does not apply custom styling to the locked part as the new design applies the styles to the TD elements instead of the TR elements. What I can suggest at this point is to override the default TD styling in the locked part as the following example demonstrates:

https://stackblitz.com/edit/angular-7szncf-upohqd?file=app/app.component.ts

Let me know if I can assist any further.

Regards,
Martin
Progress Telerik