This is a migrated thread and some comments may be shown as answers.
How to hide grid column in kendo react grid.
7 Answers 146 Views
This is a migrated thread and some comments may be shown as answers.
Mukesh
Top achievements
Rank 1
Mukesh asked on 19 Jun 2019, 06:05 AM
     Is there any property in kendo react grid which will help us in hiding the column.

7 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 19 Jun 2019, 12:25 PM
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
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
Mukesh
Top achievements
Rank 1
answered on 19 Jun 2019, 12:37 PM

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

0
Stefan
Telerik team
answered on 20 Jun 2019, 11:44 AM
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
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
Tamilarasan
Top achievements
Rank 1
answered on 15 Apr 2020, 04:26 AM

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.

0
Stefan
Telerik team
answered on 15 Apr 2020, 02:00 PM

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

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
Abhishek
Top achievements
Rank 1
answered on 08 Apr 2021, 12:57 PM
Is there a way to enable or disable checkbox conditionally in selected field
0
Stefan
Telerik team
answered on 08 Apr 2021, 01:12 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Asked by
Mukesh
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Mukesh
Top achievements
Rank 1
Tamilarasan
Top achievements
Rank 1
Abhishek
Top achievements
Rank 1
Share this question
or