Hide a particular column in Kendo React Grid?

1 Answer 414 Views
Forum suggestions
Mansi
Top achievements
Rank 1
Iron
Iron
Iron
Mansi asked on 19 Oct 2021, 08:37 AM | edited on 19 Oct 2021, 07:23 PM

Hi,

There is a column in my kendo React Grid which is not there in the data given to the grid's data attribute. I want to add this column in my grid as a hidden column.  How can I create this Kendo React grid with a particular column as hidden which is not given to the grid as data?

Thanks,

Mansi

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 20 Oct 2021, 08:52 AM

Hello, Mansi,

If the column has to be `hidden` the developer can just not pass it in the Grid confiration.

If this is not covering the requirements, please share the data, the current Grid configuration, and an image of the requirement. This will help us provide a specific suggestion for this setup.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Mansi
Top achievements
Rank 1
Iron
Iron
Iron
commented on 20 Oct 2021, 09:37 AM | edited

I have the Kendo React Grid as shown in the attachment. I want to disable the cursor pointer on hovering the add button for the row for which the add button is clicked once. Also I want to add this add button to ID column of the grid, for the row corresponding which this button is clicked.

To do so I was thinking to have a hidden boolean column in the grid with Title "Is Clicked", and have the value of this Is Clicked to decide whether to disable cursor pointer or not and whether to add this button to ID column or not.

How can I make this is Clicked column hidden? Or is there any other way in which I can achieve this functionality?

Stefan
Telerik team
commented on 20 Oct 2021, 10:17 AM

Hello, Mansi,

Thank you for the clarification.

This information can be directly kept in the data, there is no need to use a column for it. The data can have many fields and not all of them have to be in the Grid. The custom cell that is used to render the button will have the entire row data in its props.dataItem field even if this data is not shown in the Grid. 

Then based on the information in the data, the developer can change the cursor pointer as required.

Mansi
Top achievements
Rank 1
Iron
Iron
Iron
commented on 20 Oct 2021, 05:53 PM

Hi Stefan,

I understand that these can be directly stored in the data. But the data that I am getting from the backend doesn't contain this field. And I will be adding this on my own, that's why I wanted to add it as a hidden column?

Even if it can be stored in the data, is there a way to hide columns in Kendo React Grid?

Stefan
Telerik team
commented on 21 Oct 2021, 05:08 AM

Hello, Mansi,

Even if you added it to the data at a later stage it will still be available in the Grid without adding a column a then hiding it. I made an example to showcase this:

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

This shows how the developer has access to the hidden field value in the Discontinued column customer render.

Tags
Forum suggestions
Asked by
Mansi
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Stefan
Telerik team
Share this question
or