Unable to Fully Lock First Two Columns in TreeList only header of 2nd column is fixed

[Dharmik]

I'm using the Kendo React TreeList and trying to lock the first two columns: one is a text column ("Name") and the other is a custom "Actions" column with buttons/icons.
The "Name" column locks correctly, but the "Actions" column only locks the header — the cell content scrolls with the rest of the grid.
I’ve used locked: true and assigned proper width, but it doesn't behave like a fully frozen column.
The action cell is rendered using a custom React component inside cell.
Is there a known limitation or workaround to fully lock custom cell columns in the TreeList?


below is one of the example that I am attaching...
please look into this and let me know
https://stackblitz.com/edit/react-kmatjerp-nshfqmfg?file=app%2Fapp.tsx

[Yanko]

Hi, Dharmik,

Thank you for the example provided.

I tested the example, and the reason behind the issue was that the props of the cell were not passed to the custom Action cell

const ActionCell = (props: TreeListCellProps) => {
  const dataItem = props.dataItem;
  return (
    <td {...props}>
      <button onClick={() => alert(`Edit ${dataItem.name}`)}>✏️</button>
      <button onClick={() => alert(`Delete ${dataItem.name}`)}>🗑️</button>
    </td>
  );
};

Additionally, I updated the width of the table to match the total width of the TreeList columns:

tableProps={{ style: { width: '1650px' } }}

I updated the provided example to utilize the above approach to set the locked columns:

• https://stackblitz.com/edit/react-kmatjerp-vrcxbmxe?file=app%2Fapp.tsx 

Please review the above approach and let me know if additional inquiries arise.

Regards,
Yanko
Progress Telerik

[Dharmik]

Hi Yanko,

I’ve reviewed the solution you provided and tested it by integrating it into my application. However, I'm still encountering the same issue.

When resizable={true} is enabled, the locked columns ("Name" and "Actions") begin to misbehave. Specifically, they do not remain properly locked or aligned as expected during and after resizing. This misalignment creates a noticeable visual glitch and affects usability. Ideally, the "Actions" column should dynamically adjust its position based on the resized width of the "Name" column, maintaining their locked alignment without overlapping or breaking the layout.

Also there is a 10 to 12 px difference in width of Name column what is show in inspect element to what we get in onColumnResize function of kendo UI

For reference, I've replicated the issue using the same example you provided and have attached a screenshot. You can also find the modified version of the example here:
https://stackblitz.com/edit/react-kmatjerp-nkhbgztx?file=app%2Fapp.tsx

Please let me know if there's an additional configuration or workaround to ensure the locked columns remain stable while using column resizing.



Regards,
Dharmik

[Yanko]

Hi, Dharmik,

Thank you very much for the provided example.

I examined the code and further tested this behaviour. The TreeList configuration is correct. However, the issue is caused by a bug in the component. Therefore, I logged it as such in our public repo, where you can subscribe to receive notifications about status updates or potential workarounds:

• https://github.com/telerik/kendo-react/issues/3154 

I tested various workarounds, but to no sufficient end. Therefore, until the issue is resolved, I suggest unlocking the second locked column to evade misalignment.

I also tested the onColumnResize event, and the returned column widths were accurate. Can you modify the example to replicate the specific issue, in case further assistance is required:

• https://stackblitz.com/edit/react-kmatjerp-8yistcpd?file=app%2Fapp.tsx 

I sincerely apologize for any inconvenience this issue might cause you. As a token of appreciation for bringing this issue to our attention, I have updated your Telerik Points.