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

Dynamically Add and Remove Columns to the Grid


Product Progress® Kendo UI® Grid for jQuery


How can I add and remove columns to the jQuery Grid component dynamically?


The most straightforward way to achieve the desired scenario is to have hidden columns and allow the users to unhide them with the help of the column menu.

An alternative option is to use the setOptions() method with a custom UI, for example, a Kendo UI for jQuery MultiSelect that holds a collection of all the available columns:

  1. In the change event handler of the MultiSelect, get the current selection with the value() method.
  2. Call the setOptions() method of the Grid with the selected items.
    <label for="multiselect">Select Columns to display</label>
    <input id="multiselect" style="width:50%" />
    <div id="grid"></div>
      var columns = [{
        filterable: false,
        width: 70
        field: "Freight",
        width: 70
        field: "ShipName",
        title: "Ship Name",
        width: 150
      }, {
        field: "ShipCity",
        title: "Ship City",

        dataSource: {
          data: columns
        value:["OrderID", "Freight", "ShipName", "ShipCity"],
        change: function(e){
          var cols = this.value();
          var grid = $("#grid").data("kendoGrid");

        dataSource: {
          type: "odata",
          transport: {
            read: ""
          schema: {
            model: {
              fields: {
                OrderID: { type: "number" },
                Freight: { type: "number" },
                ShipName: { type: "string" },
                ShipCity: { type: "string" }
          pageSize: 20,
          serverPaging: true,
          serverFiltering: true,
          serverSorting: true
        height: 550,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: columns

See Also

In this article