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

Add a Column Header Menu dynamically

2 Answers 146 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Asela
Top achievements
Rank 1
Asela asked on 09 Nov 2018, 04:27 AM

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

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Georgi
Telerik team
answered on 12 Nov 2018, 12:01 PM
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:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Asela
Top achievements
Rank 1
answered on 14 Nov 2018, 03:51 AM

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! 

Tags
Grid
Asked by
Asela
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Asela
Top achievements
Rank 1
Share this question
or