Dynamically Add and Remove Columns to the Grid by Using the MultiSelect and Persist Their Settings

Environment

Product

Progress® Kendo UI® Grid for jQuery

Progress® Kendo UI® MultiSelect for jQuery

Description

How can I add and remove columns to the jQuery Grid component dynamically by using a Kendo UI for jQuery MultiSelect while persisting their settings such as the template and title?

Solution

To achieve the desired scenario:

1. In the dataBound event handler of the Grid, obtain the column configurations of the component with the initial Grid load.
2. In the change event handler of the MultiSelect, set the new columns configuration object.
3. Call the setOptions() method of the Grid with the new columns object.

    <label for="multiselect">Select Columns to display</label>
    <input id="multiselect" style="width:50%" />
    <div id="grid"></div>
    <script>
      var gridCols;
      var columns = [{
        field:"OrderID",
        filterable: false,
        width: 70
      },{
        field: "Freight",
        width: 70
      },{
        field: "ShipName",
        title: "Ship Name",
        template: "<strong>#: ShipName # </strong>",
        width: 150
      }, {
        field: "ShipCity",
        title: "Ship City",
        template: "<strong>#: ShipCity # </strong>",
        width:300
      }];

      $("#multiselect").kendoMultiSelect({
        dataTextField:"field",
        dataValueField:"field",
        dataSource: {
          data: columns
        },
        value:["OrderID", "Freight", "ShipName", "ShipCity"],
        change: function(e){
          var grid = $("#grid").data("kendoGrid");
          var multiSelectCols = this.value();
          var newCols =[];

          if(multiSelectCols.length < gridCols.length ) {
            gridCols.forEach(function(col) {
              if(multiSelectCols.includes(col.field)) {
                newCols.push(col)
              }
            })
          } else if(multiSelectCols.length == gridCols.length) {
            newCols = gridCols
          }

          grid.setOptions({columns:newCols});  
        }
      });

      $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
          },
          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
      });

      $("#grid").data("kendoGrid").one("dataBound", function(e) {
        var grid = e.sender;
        gridCols = grid.options.columns; //get the grid columns initially
      })
  </script>

See Also

• JavaScript API Reference of the jQuery Grid
• jQuery Grid Overview Demo