How to freeze custom rendered column in kendo react treelist?

[Satbir]

Hello,

I have a custom cell in kendo react tree list. I want to freeze that column. Setting column property locked: true does not work.

Any ideas on how to achieve this behavior?

Thanks!

[Wissam]

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:

• https://stackblitz.com/edit/react-b6zk2n?file=app%2Fmain.jsx

I hope this helps, but please let me know if you have any further questions.

Regards,
Wissam
Progress Telerik

[Satbir]

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?

 

[Wissam]

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:

• https://stackblitz.com/edit/react-b6zk2n-b7i9hl?file=app%2Fmain.jsx

You can compare it to the default behaviour here (without custom cells) where I locked the first two columns:

• https://stackblitz.com/edit/react-ay16pk?file=app%2Fmain.jsx

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