Kendo react grid - Locked columns border color customization

2 Answers 871 Views
Grid Styling / Themes
Jega
Top achievements
Rank 1
Iron
Iron
Jega asked on 01 Jun 2021, 03:26 PM

Hi,

When lock more than one columns in grid, each column has thick border on right side, how do we have thick border only on last column?

I have attached the sample image with grid three columns are locked, I need thick border at third column right on side (marked in green), do not need thick borders on column one & two (marked in red).

Thanks,

 

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 02 Jun 2021, 05:57 AM

Hello, Jega,

This can be achieved with CSS and the selector will depend on how many and which columns border has to be removed:

https://stackblitz.com/edit/react-dsedjx?file=index.html

    .k-grid td.k-grid-content-sticky:nth-of-type(1), .k-grid td.k-grid-content-sticky:nth-of-type(2) {
      border-right-width: 0px;
    }
    .k-grid .k-grid-header-sticky:nth-of-type(1), .k-grid .k-grid-header-sticky:nth-of-type(2) {
      border-right-width: 0px;
    }
I hope this is helpful.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jega
Top achievements
Rank 1
Iron
Iron
answered on 02 Jun 2021, 10:06 AM

Hi Stefan,

With your example I have added loked={true} to thired column, now border is visible both second and third column. User can lock or unlock columns dynamically. Based on number of columns column border has to change dynamically.

Thanks,

Stefan
Telerik team
commented on 02 Jun 2021, 12:11 PM

Yes, I agree that this is possible only with static columns.

The reason for the border on each column is that the locked(sticky) columns may not be next to each other depending on the scroll and they should be recognizable as locked even if not next to each other.

We may consider making this dynamic on scroll, but this may impact the performance as the scroll is fired many times.

Currently, a possible solution is to use cellRender and based on the condition to remove the left border of the cells, but this is possible only for the data rows, the header will still have to border.
Tags
Grid Styling / Themes
Asked by
Jega
Top achievements
Rank 1
Iron
Iron
Answers by
Stefan
Telerik team
Jega
Top achievements
Rank 1
Iron
Iron
Share this question
or