How to freeze/lock columns

[Azim]

How to freeze/lock columns in React Kendo Grid ? I was thinking of creating two grids and render locked columns in first and rest in second grid, but we would have to rewrite pagination component and bind scroll events in between etc... What is the best way to implement this ?

Offtopic: Can i have pagination component decoupled from Grid ?

[Stefan]

Hello, Azim,

Currently, implementation of the frozen columns with this version of the Grid may require many different customizations like keeping the row hight the same, synchronizing the scrolling, keeping the pages in sync and many more that can come up during the implementation.

Please have in mind that the frozen columns are in our ToDo list for the next official release. If the deadline for the feature is not very soon, we can recommend waiting for the built-in support, as our developers will ensure to handle all of the different specifics on this implementation.

If the there is no time waiting for the feature it can be implemented manually or to use the Grid wrapper which has this feature already implemented. As the wrapper Grid is not native React component we recommend using it only in cases where the application requires many features that are still not available in the native version:

https://www.telerik.com/kendo-react-ui/wrappers/grid/

Frozen columns demo:

https://next.plnkr.co/edit/I4LfumduTAmioa2P

Let me know if you need more details on this matter.

Regards,
Stefan
Progress Telerik

[Ajit]

Hey Stefan,

i saw the Locked props feature for column, but its not in the similar functionality as Frozen Columns in jQuery UI 

in React the locked Columns stays there itself where the position is and also no feature to Lock/Unlock from UI/ColumnMenu.

eg : https://www.telerik.com/kendo-react-ui/components/grid/columns/locked/

is there any props/way i can have Lock/Unlock option in CoumnMenu?

and also all the locked columns should rearrange to left side like it did in jQuery!

https://demos.telerik.com/kendo-ui/grid/frozen-columns

[Stefan]

Hello, Ajit,

Regarding both questions:

1) Is there any props/way i can have Lock/Unlock option in CoumnMenu? - Yes, this can be done using custom logic in the ColumnMenu to render the columns and change their locked property. We have an example that show/hide the columns from the ColumnMenu and the approach can be made for locking them. The main difference will be that instead of changing the show property of the column we have to update the locked property.

https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu/#toc-custom-components

2) and also all the locked columns should rearrange to the left side like it did in jQuery! - They arranged on the left side because in Kendo UI for jQuery we render two different tables. As the sticky CSS property is already available we did a new modern approach that allows more flexibility.  They can still be set of the left by sorting the columns collection based on the locked property.

I have extended the demo to showcase both requirements in a demo:

https://stackblitz.com/edit/react-qaq9vc?file=app%2Fcolumns.js

I hope this proves helpful.

Regards,
Stefan
Progress Telerik

[Ajit]

Thanks Stefan for the help!! much appreciated!