How to hide grid column in kendo react grid.

how to use the same property on GridColumn if i want use.

I have a prop based on that i want to hide/show grid column

<GridColumn field="selected"
width="60px"
filterable={false}
headerSelectionValue={props.data.findIndex((dataitem :any) => dataitem.selected !== true) === -1}
/>

Show/Hide checkbox column based on some property

Hi Stefan.

Is there any way to bring show/hide column inside the grid box, like paging buttons, and is there any option available to open a dialogue box when we click show/hide button, from there we can choose columns to display in the grid.

Hello, Tamilarasan,

Yes, this is possible.

Please check the following demo showcasing a similar use case:

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

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Hello, Abhishek,

The checkbox is rendered by the developer and the developer has full control to add the disabled attribute conditionally. We are event adding it conditionally in the demo:

                     {this.state.columns.map((column, idx) =>
                                        (
                                          <div key={idx} className={'k-column-list-item'}>
                                            <span>
                                              <input
                                                id={`column-visiblity-show-${idx}`}
                                                className="k-checkbox"
                                                type="checkbox"
                                                readOnly={true}
                                                disabled={column.show && oneVisibleColumn}
                                                checked={column.show}
                                                onClick={() => { this.onToggleColumn(idx); }}
                                                    />

Regards,
Stefan
Progress Telerik