Some Tricky Works With Kendo Grid

EDIT:

4-How to Dynamically Disable/Enable Grouping Grid

5-How to add checkbox for select some  or all records

thanks...

Hello, Rohullah,

Regarding the questions:

1) how to hide some columns - This can be done by changing the collection of columns passed to the Grid. We have a demo showcasing this:

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

2) how to auto adjust width columns to content size - I can suggest using a method to calculate with a width of the rendered text(I used a third-party library called calculate size). Then set the width of the column to a function that will calculate the width of the longest text and set it. I made an example showcasing this:

https://stackblitz.com/edit/react-2jlahu?file=app/main.jsx

3) dynamically refresh kendo grid data - This will be done automatically if the Grid data is bound to the state. When the state is changed the Grid will update as well.

4) How to Dynamically Disable/Enable Grouping Grid - Bind the groupable value to a value in the state, when the value changes the groupable property will change as well:

5) How to add a checkbox for select some  or all records - Please check the selectable article of the Grid, the second example is with checkboxes:

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

In general, the KendoReact Grid follows the ReactJS concepts, it only shows data and properties based on the properties that it receives. This is valid for all of its properties if the property is part of the state and the state changes, the Grid will be rendered with the new value of the property (groupable, filterable, resizable, etc).

I hope this is helpful.

Regards,
Stefan
Progress Telerik