This is a migrated thread and some comments may be shown as answers.

Dynamically show or hide columns in Kendo Grid

12 Answers 3883 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Khushali
Top achievements
Rank 1
Khushali asked on 16 Mar 2012, 06:32 AM
Hi,

I have a kendo grid, and there is a button on click of which i need to hide some of the columns. And on click of other button same columns which were hidden, needs to be shown again. Found in some forums that it can be achieved by changing the column definition but that does not seem to be a good approach. Please help.

Regards,
Khushali

12 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 16 Mar 2012, 09:05 AM
Hello Khushali,

The Kendo Grid does not implement API for showing/hiding column yet. However the algorithm for this is quite simple:
 - hide the header for given column, i.e th element
 - hide the corresponding td elements
 - remove the col element for the column in question

We will provide API and UI for this functionality at some point, but at the moment I cannot be more concrete. You can keep track of our road map of what's been committed for next official release and also vote in your user voice.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Khushali
Top achievements
Rank 1
answered on 16 Mar 2012, 10:57 AM
Thanks Nikolay, that works fine.
0
Atul
Top achievements
Rank 1
answered on 15 Jun 2012, 07:21 AM
Hello,

 Can you please give code how to hide Header and hide vertical lines in grid

Thanks,
Atul
0
Khushali
Top achievements
Rank 1
answered on 18 Jun 2012, 01:25 PM
Hi,

I am right now hiding and showing the columns using "td" elements. But, now my grid is editable. So, the columns that i was hiding, appears on click of edit, delete, update and cancel. Kendo has events for edit, save and remove where i can add my logic to hide these columns again. But on click of cancel button i am not able to hide these columns as there is no such event. I tried to hide on click of cancel button, but could not. Please suggest, how can i achieve this.

Regards,
Khushali
0
Manik
Top achievements
Rank 1
answered on 22 Jun 2012, 06:07 PM
Hi,

Is this feature to hide/show columns is implemented yet?

Thanks,
Manik
0
Logan
Top achievements
Rank 1
Veteran
answered on 12 Jul 2013, 06:08 PM
Has this feature been implemented yet?
0
Sebastian
Telerik team
answered on 15 Jul 2013, 08:34 AM
Hello guys,

This is already supported codelessly via the column menu available in the grid. See this online example for reference.

Additionally, you can utilize the showColumn method from the client API for the same purpose.

Best regards,
Sebastian
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Logan
Top achievements
Rank 1
Veteran
answered on 15 Jul 2013, 11:39 AM
I was not able to use the Column Menu for this purpose, because I needed to dynamically show/hide columns from a grid in a detailed template based on the data from the parent grid row.   The user also needed to be able to edit the sub grid without seeing any removed columns.

Using the hideColumn method triggered from the DataBound event on grid looks like it will do what I want.

Thanks,
~Logan

@(
Html.Kendo().Grid<Employee>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.EmployeeID).Groupable(false);
columns.Bound(p => p.FirstName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.City);
columns.Bound(p => p.Country);
columns.Bound(p => p.Title);
})
// .ClientDetailTemplateId("template")
.Editable(e=>e.Mode(GridEditMode.InCell))
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.EmployeeID))
.Read(read => read.Action("Employees_Read", "Home"))
.Update(update=>update.Action("Employees_Update","Home"))
)
.Events(e=>e.DataBound("remoteColumns()"))
)

<script>
function remoteColumns() {
// $('#Grid th:nth-child(1), #Grid td:nth-child(1)').remove();  This will remove the row, but will cause problems with in-line/cell editing
this.hideColumn(0);
}
</script>
0
Houssam
Top achievements
Rank 1
answered on 19 Aug 2014, 05:41 PM
Please use Hidden("Condition") as showColumn and hideCOlumn will cause the grid layout to break
0
Tom
Top achievements
Rank 1
answered on 27 Nov 2017, 10:13 AM

Thanks Houssam. Best answer out the lot and you aren't even an admin.

.Hidden(!Model.IsSomethingVisible);

0
srisaigowtham
Top achievements
Rank 1
answered on 19 Jan 2021, 10:45 AM

Hi Rusev,

I have the same functionality to achieve. But in my case I want to insert a new column whenever the user click on a button dynamically and be able to remove it dynamically. Please suggest if there is a possibleway.

Thanks,

Gowtham.

0
Nikolay
Telerik team
answered on 22 Jan 2021, 10:33 AM

Hello Gowtham,

The column collection could be changed only by re-initializing the Grid widget through the "setOptions" method or by destroying and initializing it from scratch.

var oldOptions = grid.getOptions();
oldOptions.columns = getMyNewColumns();
grid.setOptions(oldOptions);

The setOptions() method in action can be observed in the following Persist state Grid demo:

Let me know if you have any questions.

Regards,
Nikolay
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/.

Tags
Grid
Asked by
Khushali
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Khushali
Top achievements
Rank 1
Atul
Top achievements
Rank 1
Manik
Top achievements
Rank 1
Logan
Top achievements
Rank 1
Veteran
Sebastian
Telerik team
Houssam
Top achievements
Rank 1
Tom
Top achievements
Rank 1
srisaigowtham
Top achievements
Rank 1
Nikolay
Telerik team
Share this question
or