How to hide group columns of kendo grid

See more:

grid

Kendo

Hi,
I have a Kendo Grid, in this grid there are few columns which can be hidden according to input provided by user. Those columns are group column. The link is given below.

[^]

I want to hide the group column the header columns are getting hide but the data portion is not getting hide. I tried to hide the data part but only row number 1 is getting hidden, the rest of the rows are not getting hidden.

In the image you will see header columns like 'C2','S2' etc and their sub headers AVL, DMG, RSV, Demand, Supply and these sub headers have data part, I want these data columns should be hidden along with the header and sub headers


Please suggest any solution so that i can also hide the data part alongwith the header column.

What I have tried:

I assigned HeaderHtmlAttributes to the Header Columns ('C2', 'S2' etc) and sub header
(AVL, DMG, RSV, Demand, Supply) and assigned HtmlAttributes to the same sub headers and in jQuery written my code to hide them.