1 Answer, 1 is accepted
Hi, Satbir,
You can achieve this by also adding the following properties to the td element. These are applied to the default cells when they are locked, but since we are custom rendering the cells, we need to add them:
<td
className="k-table-td k-grid-content-sticky k-text-nowrap"
role="gridCell"
style={{
left: '0px',
right: '100px',
borderRightWidth: '1px',
}}
>
<span
style={{
color: cellData ? 'green' : 'red',
}}
>
{String(cellData)}
</span>
</td>For convenience, I prepared an example where this is achieved. The "Full Time" column that has a custom cell rendered is locked:
I hope this helps, but please let me know if you have any further questions.
Regards,
Wissam
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
Thank you, yes this solution works fine when I am freezing only the first custom column.
I have two custom columns and I need to freeze both of them, This solution does not work with that. Even in your example if I add Full Time again, it does not work as expected.
Can you help with that?
Hi, Satbir,
For the second column, the `class` is `k-table-td k-grid-content-sticky` and the `right` CSS value is `0px` instead of `100px`. I updated the example where I rendered a separate cell `MyCell2` for the "Name" column:
You can compare it to the default behaviour here (without custom cells) where I locked the first two columns:
In addition, just for more information on how I found the solution, I inspected the `td` element of the above example that does not include the custom cells using Chrome devtools to check what classes are rendered and what CSS styles are applied.
Let me know if you have any further questions on this matter.
Regards,Wissam
Progress Telerik