Group column headers dynamically

[Daniel]

Hello. 

I have a telerik kendo grid and I need to display columns dynamically based on the Year which a user selects from a dropdownlist. Let's say the user selects 2015 from the dropdown, then columns 2015 to 2024 should be visible.

Adding the columns dynamically through code was a bit fussy so I set the hidden property to true when defining the grid and I have added code to the onDataBinding event to show the required columns. My code is as follows:

    function onDataBinding(e) {
        var grid = $("#grid").data("kendoGrid");
      
        //hide all columns for years first then display required columns
        var initialYear = 2015;
        for (var i = 0; i < 45; i++) {
            var column = 'C' + (initialYear + i);
            grid.hideColumn(column);
        }

        var financialYearInInt = parseInt(currentFY); //currentFY is the year which user selects from dropdownlist
        for (var i = 0; i < 10; i++) {
            var columnName = 'C' + (financialYearInInt + i);
            grid.showColumn(columnName);
        }
    }

 

This is working perfectly as shown in the Current.JPG attachment.

Now I need to add a Title to the columns, that is on top of columns 2015 and 2016, I need to have 'Forecast' as show in RequiredOutcome attachment.

I need to add the title dynamically as if let's say the user select year 2018 from the dropdownlist, then columns 2018 to 2027 will be visible and I need to add the title 'Forecast' to column 2018 and 2019.

Please advise how I can address this.

Thanks

[Preslav]

Hello Daniel,

I understand the requirements.

Showing and hiding columns is easy, unfortunately, there is no similar approach for assigning multi-column headers dynamically. 

What I could suggest is to use the setOptions method of the Grid, to assign new columns when the user selects an option from the DropDown. Have in mind that this will recreate the grid and this could lead to slower performance.

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions

A demo for the multi-column headers is available here:

• https://demos.telerik.com/kendo-ui/grid/multicolumnheaders

Please, give the above a try and let me know if you require any further assistance.


Regards,
Preslav
Progress Telerik