Dynamically show or hide columns in Kendo Grid

[Khushali]

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

[Nikolay Rusev]

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

[Khushali]

Thanks Nikolay, that works fine.

[Atul]

Hello,

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

Thanks,
Atul

[Khushali]

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

[Manik]

Hi,

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

Thanks,
Manik

[Logan]

Has this feature been implemented yet?

[Sebastian]

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

[Logan]

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>

[Houssam]

Please use Hidden("Condition") as showColumn and hideCOlumn will cause the grid layout to break

[Tom]

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

.Hidden(!Model.IsSomethingVisible);

[srisaigowtham]

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.

[Nikolay]

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.

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions

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:

• https://demos.telerik.com/kendo-ui/grid/persist-state

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik