This is a migrated thread and some comments may be shown as answers.

Group column headers dynamically

1 Answer 136 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 21 Jan 2018, 11:00 AM

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

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 23 Jan 2018, 01:46 PM
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.
A demo for the multi-column headers is available here:
Please, give the above a try and let me know if you require any further assistance.


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or