Add a Column Header Menu dynamically

[Asela]

Hi,

I am having  the following requirement related to the column header menu.

In my grid, when the horizontal scroll bar is visible, the column menu (three dots icon) should be shown in the column headers. The column header menu should have filtering, lock and unlock options.

When the horizontal scroll bar is not visible (in other words when the user is able to see the whole content of the grid without scrolling horizontally), the column header should have the column filter option. There shouldn't be a column menu.

Either of these can be done at the point of grid initialization. But I'm having trouble changing them dynamically. This is needed because we also provide a separate control to show/hide the columns in the grid so the total width of the grid can change based on the total visible column width. 

Is there a way to add/remove the column menu dynamically on the column headers? 

Thanks.

Asela

 

[Georgi]

Hello Asela,

A possible solution is to check for the sum of the widths of all columns after the initialization of the grid and in case the sum of the widths increases the width of the grid element hide all column menu icons and initialize kendoFilteMenus.

e.g.

var sumWidths = grid.columns.reduce(function(a,b){
    if(b.width){
        return a + b.width;
    }

    return a;
},0)

if(sumWidths <= grid.wrapper.width()){
   grid.thead.find('.k-header-column-menu').each(function(){
        $(this).hide();
        $(this).parents('th').kendoFilterMenu({
            dataSource: grid.dataSource
        })
   });
}

Below you will find a small sample which demonstrates the above approach:

• https://dojo.telerik.com/adaDoluV

Regards,
Georgi
Progress Telerik

[Asela]

Hi Georgi,

Thanks a lot! I had to add a few more lines of code to make it show/hide the menu and filter as I add/remove columns in the grid but it worked!