Kendo UI showColumn multi-column

Question

I'm using showColumn and hideColumn to show and hide columns in a Kendo UI grid. But, now with the addition of multi-column headers, I can only hide and show the top level headers.

Here's an example of the js:

    $('#data-plan').click(function () {        
        $('#data-plan').find('i').toggleClass('show hidden');        
        var grid = $("#lpdatagrid").data("kendoGrid");        
        var col = 0;        
        if (grid.columns[col].hidden) {        
            grid.showColumn(+col);        
        } else {        
            grid.hideColumn(+col);        
        }        
    });        

Using "0" shows/hides the first level column of the multi-column header. What are the column "numbers" for the second level headers that I can call with showColumn and hideColumn?

I apologize for poor code. I'm not a developer.

Answer 1

You might use the name of the field in the column that you want to show / hide. Assuming that you have a Grid that has a Country column, grouped under Location that is under Contact Info, something like:

        columns: [
          {
            field: "CompanyName",
            title: "Company Name"
          },
          {
            title: "Contact Info",
            columns: [
              {
                field: "ContactTitle",
                title: "Contact Title"
              },
              {
                field: "ContactName",
                title: "Contact Name"
              },
              {
                title: "Location",
                columns: [ 
                  { field: "Country" },
                  { field: "City" }
                ]
              },
              {
                field: "Phone",
                title: "Phone"
              }
            ]
          }
        ]

Then you can use:

        var grid = $("#grid").data("kendoGrid");
        // Get the "Country" column that is
        var col = grid.columns[1].columns[2].columns[0];
        // Check if it is visible or hidden
        if (col.hidden) {
          grid.showColumn(col.field); // or directly grid.showColumn("Country");
        } else {
          grid.hideColumn(col.field); // or directly grid.hideColumn("Country");
        } 

$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
      },
      pageSize: 20
    },
    height: 300,
    pageable: true,
    columns: [
      {
        field: "CompanyName",
        title: "Company Name"
      },
      {
        title: "Contact Info",
        columns: [
          {
            field: "ContactTitle",
            title: "Contact Title"
          },
          {
            field: "ContactName",
            title: "Contact Name"
          },
          {
            title: "Location",
            columns: [ 
              { field: "Country" },
              { field: "City" }
            ]
          },
          {
            field: "Phone",
            title: "Phone"
          }
        ]
      }
    ]
  });

  $("#country").on("click", function() {
    var grid = $("#grid").data("kendoGrid");  
    var col = grid.columns[1].columns[2].columns[0];
    if (col.hidden) {
      grid.showColumn(col.field);
    } else {
      grid.hideColumn(col.field);
    } 
  });
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<button id="country" class="k-button">Toggle Country</button>
<div id="grid"></div>