Hatton Point
Top achievements
Rank 1
Hatton Point
asked on 03 Jan 2013, 08:29 PM
In a Grid. How best would I hide the column menu for certain columns? I have a few column headers that align to the right. The arrow appears behind the text and makes it difficult to read the Column Title. I would simply like to hide the Column Menu for these columns.
I am not referring to hiding them from appearing in the Column Menu itself.
In the below screenshot, I want to see the column menu on Company but not on Sum of Qty or Sum of Order.
http://goo.gl/DFQC7
I am not referring to hiding them from appearing in the Column Menu itself.
In the below screenshot, I want to see the column menu on Company but not on Sum of Qty or Sum of Order.
http://goo.gl/DFQC7
4 Answers, 1 is accepted
0
Accepted
Hello Hatton,
Once the Grid is created you can remove the handler for the column menu.
Here is a full example: http://jsbin.com/idiroc/1
Regards,
Nikolay Rusev
the Telerik team
Once the Grid is created you can remove the handler for the column menu.
//remove column menu handler for `bar` column
grid.thead.find(
"[data-field=bar]>.k-header-column-menu"
).remove();
Here is a full example: http://jsbin.com/idiroc/1
Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Hatton Point
Top achievements
Rank 1
answered on 04 Jan 2013, 05:46 PM
Excellent. As I am using MVC, the grid was already defined. I only needed the last part of the jsbin.
My complete code (inside script tags following the MVC grid):
Note for other. The last three columns are hidden on load, but will appear in the ColumnMenu drop down and visibility can be set to on. The script still executes against those hidden columns and removes the ColumnMenu.
My complete code (inside script tags following the MVC grid):
$(function () {
var grid = $("#bsbBookTypeGrid").data("kendoGrid");
grid.thead.find("[data-field=Quantity]>.k-header-column-menu").remove();
grid.thead.find("[data-field=OrderDollars]>.k-header-column-menu").remove();
grid.thead.find("[data-field=Month]>.k-header-column-menu").remove();
grid.thead.find("[data-field=MonthName]>.k-header-column-menu").remove();
grid.thead.find("[data-field=Year]>.k-header-column-menu").remove();
});
Note for other. The last three columns are hidden on load, but will appear in the ColumnMenu drop down and visibility can be set to on. The script still executes against those hidden columns and removes the ColumnMenu.
0
Rowell
Top achievements
Rank 1
answered on 04 Aug 2014, 03:12 PM
Hi Nikolay,
I'm trying to do the same thing but in the child grid column. I have grid with hierarchy, I want to remove the columnMenu of one column in the child grid.
I will be thankful if you can sahre some code on this.
I'm trying to do the same thing but in the child grid column. I have grid with hierarchy, I want to remove the columnMenu of one column in the child grid.
I will be thankful if you can sahre some code on this.
0
Hello Rowell,
The approach is the same - right after grid initialization (in your case detail grid) remove the column menu handler.
The specific implementation depends on how you are initializing detail grid.
Regards,
Nikolay Rusev
Telerik
The approach is the same - right after grid initialization (in your case detail grid) remove the column menu handler.
The specific implementation depends on how you are initializing detail grid.
Regards,
Nikolay Rusev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.