Kendo UI Grid Multi Column Hide/Show using field name

Question

I am using grouped columns...

columns.Group(group => group
    .HeaderTemplate("<span id='GroupHeader1'></span>")
    .Columns(info =>
    {
        info.Bound(x => x.Quantity1).Title("Qty");
        info.Bound(x => x.ECD1).Title("ECD");
    }).HeaderHtmlAttributes(new { @data_title="Group1", @data_field="Group1" })
);

columns.Group(group => group
    .HeaderTemplate("<span id='GroupHeader1'></span>")              
    .Columns(info =>
    {
        info.Bound(x => x.Quantity2);
        info.Bound(x => x.ECD2);
    }).HeaderHtmlAttributes(new { @data_title="Group2", @data_field="Group2" })
);

I can hide the multicolumn group by referencing the column order...

var grid = $("#grid").data("kendoGrid");
grid.hideColumn(1);

BUT I need to hide/show these groups by calling them by the data-field (or id or data-title [any of which I can set in HeaderHtmlAttributes]) as I want to allow users to reorder columns.

AND this does not work...

grid.hideColumn("Group1");

*Keep in mind that the title of the group header is dynamic too (it changes based on a mutliselect and referencing the GroupHeader1 / GroupHeader2 Ids)

Thanks in advance!

Answer 1

This should work according to Kendo API Documentation . You may be using an old version of Kendo UI. Upgrade your Kendo UI to the latest one.