Conditionally Display Columns

Environment

Product

Progress® Kendo UI® Grid for jQuery

UI for ASP.NET MVC

Description

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

Solution

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();
}

@(Html.Kendo()
  .Grid<DetailGrids.Models.Inventory>()
  .Name("InvGrid")
  .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;
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{ name: "edit" }], hidden: !isAdmin }
  ],
  editable: "popup",
  dataSource: [ { name: "Jane" }, { name: "Bill" } ]
});