This is a migrated thread and some comments may be shown as answers.

How to freeze/lock columns

4 Answers 1143 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Azim
Top achievements
Rank 1
Azim asked on 23 Jul 2018, 12:32 PM
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 ?

4 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 24 Jul 2018, 07:05 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ajit
Top achievements
Rank 1
answered on 16 Apr 2020, 11:36 AM

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

0
Stefan
Telerik team
answered on 16 Apr 2020, 01:55 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Ajit
Top achievements
Rank 1
answered on 21 Apr 2020, 11:56 AM
Thanks Stefan for the help!! much appreciated!
Tags
General Discussions
Asked by
Azim
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Ajit
Top achievements
Rank 1
Share this question
or