New to Kendo UI for jQuery? Download free 30-day trial

Conditionally Display Columns


Product Progress® Kendo UI® Grid for jQuery UI for ASP.NET MVC


How can I hide some of the Grid columns and conditionally display Edit and Delete buttons?


The column configuration of the Grid for ASP.NET MVC has a Hidden() (columns.hidden) property that expects a Boolean value which can be used for such purposes.

The following example demonstrates how to pass a value in the ViewBag for a key and give it a true or false value in the controller, and then access it in the Razor template.

To individually fine-tune a command, use the command visible function.

Razor Example
public ActionResult Index()
    ViewBag.IsAdmin = true;
    return View();

  .Columns(columns =>
    columns.Bound(p => p.OnOrder).Width(125).Hidden(ViewBag.IsAdmin);
    columns.Command(command => { command.Edit(); command.Destroy(); }).Hidden(!ViewBag.IsAdmin);
JavaScript Example
var isAdmin = false;
  columns: [
    { field: "name" },
    { command: [{ name: "edit" }], hidden: !isAdmin }
  editable: "popup",
  dataSource: [ { name: "Jane" }, { name: "Bill" } ]
In this article