How Can I Hide Kendo UI Grid Columns using JavaScript, React, Angular, Vue or ASP.NET MVC

Question

I\'m working on a HTML5 and JavaScript website.

Is it possible to have a hidden column in Kendo UI Grid and access the value using JQuery?

Answer 1

As @Nic says there are multiple ways of hiding a column but I'm gonna assume that you are using KendoUI methods for hiding it. I.e: set the column hidden to true or programmatically invoke hideColumn.

If so, you should remember that you model might have fields that are not displayed or not even mapped in columns but they exist and you can still access them.

If we have the following Grid definition:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    selectable: true,
    ...
    columns   :
    [
        { field: "Id", hidden: true },
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" }
    ]
}).data("kendoGrid");

Where I've declared a column Id as hidden. I still can access the value of Id by going to the model using:

// I want to access the Id for row 3
var row = $("tr:eq(3)", "#grid");
// Retrieve the item from the grid using dataItem method
var item = $("#grid").data("kendoGrid").dataItem(row);
// Show Id
alert("Id is " + item.Id); 

Runnable example

var grid = $("#grid").kendoGrid({
  dataSource: [
    { Id: 1, FirstName: "John", LastName: "Smith" },
    { Id: 2, FirstName: "Jane", LastName: "Smith" },
    { Id: 3, FirstName: "Jack", LastName: "Smith" },
    { Id: 4, FirstName: "Joseph", LastName: "Smith" },
    { Id: 5, FirstName: "Jeff", LastName: "Smith" },
  ],
    selectable: true,
    columns   :
    [
    { field: "Id", hidden: true },
    { field: "FirstName", width: 90, title: "First Name" },
    { field: "LastName", width: 200, title: "Last Name" }
  ]
}).data("kendoGrid");

$("#show").on("click", function(e) {
  var row = grid.select();
  if (row) {
    var item = grid.dataItem(row);
    alert ("The ID is :" + item.Id);
  } else { 
    alert("Select a row");
  }
});

#grid {
    width : 490px;
}

Select row and click Here to show hidden Id.