Hide a Kendo UI Grid column when using a column header

Hello,

I have a multi-column kendo grid, all separated by headers, note:

InthecaseoftheimageIneedtodynamicallyhidethemetacolumnofthebillingheader.BeforetheheadersIusedthefollowingcodewhere"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've added the header, I'm no longer able to 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;
        }
      }
    }
  }
}