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

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


Product Progress® Kendo UI® Grid for jQuery Progress® Kendo UI® MultiSelect for jQuery


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?


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>
      var gridCols;
      var columns = [{
        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>",

        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)) {
          } else if(multiSelectCols.length == gridCols.length) {
            newCols = gridCols


        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

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

See Also

In this article