Hide a column from the Kendo UI Grid when using a column header

Question

Hello,

I have a Kendo grid with several columns, all separated by headers, please note:

In the case of the image I need to dynamically hide the meta column of the billing header. Before the headers I used the following code where "aChk" is the value of a checkbox:

function esconderMostrarColuna(aChk) {
   var grid = $("#grdDados").data("kendoGrid");
   for (var i = 0; i < grid.columns.length; i++) {
      if (grid.columns[i].field == aChk.value) {
        if (!aChk.checked) {
          grid.hideColumn(i);
        } else {
          grid.showColumn(i);
        }
        return;
      }
   }
}

After I added the header, I’m no longer able to do hideColumn correctly. I currently have my code like this:

function esconderMostrarColuna(aChk) {
  var grid = $("#grdDados").data("kendoGrid");
  for (var i = 0; i < grid.columns.length; i++) {
    for (var j = 0; j < grid.columns.length; j++) {
      if(grid.columns[i].columns[j] != undefined){
        if (grid.columns[i].columns[j].field == aChk.value) {
          if (!aChk.checked) {
            grid.hideColumn(i);
          } else {
            grid.showColumn(i);
          }
          return;
        }
      }
    }
  }
}

Answer 1

For Kendo, you can only hide everything, you can’t hide just one of the columns. So either hide "Meta" and "Dt/Hr" (Entire Billing), or don’t hide this column.