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
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;
}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/.
Rank 1
Iron
Iron
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,
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.