Group column headers dynamically

2 posts, 0 answers
  1. Daniel
    Daniel avatar
    8 posts
    Member since:
    Sep 2017

    Posted 21 Jan Link to this post

    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

  2. Preslav
    Admin
    Preslav avatar
    444 posts

    Posted 23 Jan Link to this post

    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.
Back to Top