How to hide grid column in kendo react grid.

[Mukesh]

     Is there any property in kendo react grid which will help us in hiding the column.

[Stefan]

Hello, Mukesh,

The recommended approach to hide and show the columns is to use a columns collection. Then based on a flag only the "visible columns" have to be rendered.

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

We also have example of this with column chooser inside the Column Menu:

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

Regards,
Stefan
Progress Telerik

[Mukesh]

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

[Stefan]

Hello, Mukesh,

If the property is not in the column collection I can suggest the following approach recommended by React to show elements conditionally:

{ props.showSelectColumn && <GridColumn field="selected"
width="60px"
filterable={false}
headerSelectionValue={props.data.findIndex((dataitem :any) => dataitem.selected !== true) === -1}
/> } // if the prop is true, the column will be shown, or otherwise it will be hidden

Regards,
Stefan
Progress Telerik

[Tamilarasan]

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.

[Stefan]

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

[Abhishek]

Is there a way to enable or disable checkbox conditionally in selected field

[Stefan]

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

[Daniel]

Hi Stefan.

it is possible to handle this functionality - https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu/#toc-custom-components 

from a button in GridToolbar, my mean is that when I press the button on GridToolbar the popup of choose columns, shows and handles from there?

[Stefan]

Hello, Daniel,

Yes, this is possible, this is the example we had before we introduced the column menu and it is still valid:

https://stackblitz.com/edit/react-grid-toggle-column-xyixv6?file=index.js

That button can be rendered in the GridToolbar as well or anywhere on the page.