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

Turn Off Column Menu On Certain Columns

17 Answers 3244 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AGB
Top achievements
Rank 1
Iron
AGB asked on 20 Apr 2016, 02:19 PM
Hi Guys

Is it possible to turn off the column menu on certain columns ?

I have tried setting the grid options as follows :

    columnMenu: { columns: false },
    columns: [{
         field: "MAJ_RE_BASE",
         title: "Base",
         filterable: false,
         sortable: false,
         menu: false,
 
but this still shows the column menu icon.

Which leads onto another slight problem that if you now click on the icon a small blank menu is drawn with no content (see ColumnMenu.png)

I have trawled through the docs & forums for guidance but have so far drawn a blank.

Therefore any help would be much appreciated.

Thanks
Alan

17 Answers, 1 is accepted

Sort by
0
Accepted
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 20 Apr 2016, 07:11 PM
Hi Alan,

Please take a look at the following Telerik Dojo illustrating how to remove a column menu.

Here is the code I used to remove the column menu:
var grid = $("#grid").data("kendoGrid");                   
//By field 
grid.thead.find("[data-field=ShipCountry]>.k-header-column-menu").remove();       
                 
//By Index   
grid.thead.find("[data-index=1]>.k-header-column-menu").remove();

Hope this helps!  

Regards,
Patrick
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
AGB
Top achievements
Rank 1
Iron
answered on 25 Apr 2016, 10:11 AM

Thanks Patrick,

 

That works a treat.

 

Regards

Alan

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 26 Apr 2016, 06:36 PM
Hello Alan,

Glad everything is working!

Regards,
Patrick
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
David
Top achievements
Rank 2
answered on 12 Dec 2018, 08:41 PM
Is there any chance this could be added as a column definition option to indicate that there should not be a menu for a specific column?
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 13 Dec 2018, 06:41 PM
Hi David,

Currently, a configuration to hide a specific column's columnMenu is not supported at the moment.  However, I recommend adding this idea to our Progress Kendo UI Feedback Portal where features are voted for by the community to be reviewed by our developers for future releases.  

Thank you for choosing Progress.

Regards,
Patrick
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
Don
Top achievements
Rank 1
answered on 21 Aug 2019, 08:16 PM
Has this feature been added to the latest Telerik version ? I would like to also request it for ASP.NET MVC and ASP.NET Core.
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 22 Aug 2019, 02:26 PM

Hello Don,

There has been a Feature Request on the subject which is pending review currently.  I would highly recommend adding a comment on the thread to add any details you would like to convey to our the developers, and the community.    

Regards, Patrick
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
Garry
Top achievements
Rank 2
Veteran
answered on 22 Jan 2021, 12:21 PM

Thanks Patrick. After wasting an hour trying to find the correct CSS selector, you have solved my problem.

I hade hoped that setting the columnMenu: false would work in the columns collection, but that has no effect and your workaround does the job.

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 22 Jan 2021, 02:58 PM

Hi Gary,

I'm glad the workaround helped in your web application. If you haven't, I recommend adding your vote to this feature request and adding a comment for our developers to consider for future releases.  

Regards,
Patrick
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
fereshteh
Top achievements
Rank 1
Veteran
answered on 17 Feb 2021, 11:16 AM
hi there
i have a gird which is created from table
i pass data-menu="false" attribute to th tag for setting column.menu to false but it is not working. would you please help me?
the demo page is : https://dojo.telerik.com/eQALunad/9
 
 
 
 
 
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 17 Feb 2021, 10:09 PM

Hello Fereshteh,

Currently, in order to remove a column's menu, use the jQuery approach shared previously.  For example, using the for the provided Grid:

        $(document).ready(function() {
          $("#grid").kendoGrid({
            columnMenu: true,
          });


          //Reference the Kendo Grid  
          var grid = $("#grid").data("kendoGrid");

          //Removing The Ship Country Column Menu:      
          //By field  
          grid.thead.find("[data-field=make]>.k-header-column-menu").remove();
          grid.thead.find("[data-field=model]>.k-header-column-menu").remove();     

          //By Index  
          //grid.thead.find("[data-index=1]>.k-header-column-menu").remove();

        });

Please feel free to add your vote, follow for any upcoming updates, and comment on the feature request related to this inquiry.  

Regards,
Patrick
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
fereshteh
Top achievements
Rank 1
Veteran
answered on 18 Feb 2021, 06:17 AM

hi Patrick and thank you for your answer. but this is not what i want. i don't want to remove the three dots button from the column header. i want to remove that column from columnMenu which user can check and uncheck for showing and hiding specific colunm. for example i want first column to be shown all time and user can not uncheck it inside columMenu
for more detailes please visit this post 

i really need your help. thank you

 
 
 
 
 
 
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 18 Feb 2021, 08:13 PM

Hi Fereshteh,

Pertaining to the behavior regarding data-menu, I will reach out to the Kendo UI Grid developers to investigate it further.

In the meantime,  one way to hide a specific column marked as data-menu = "false" is to use the columnMenuInit event to configure the columnMenu.  

          function onColumnMenuInit(e){

            //Avaliable Grid columns
            var columns = e.sender.columns;

            //get menuItem inputs
            var inputs =  $(e.container).find("input");

            for(var x = 0; x < columns.length; x++){

              //if the column's menu property is set to false
              if(columns[x].menu == "false"){

                //hide the parent span of the input
                $(inputs[x]).parent("span").hide();
              }
            }
          }

Please take a look at this updated Progress Kendo UI Dojo which shows the implementation above, and let me know if you have any questions. 

Regards,
Patrick
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 19 Feb 2021, 03:13 PM

Hello Fereshteh,

I wanted to update you to let you know the Kendo UI Grid developers have confirmed this behavior is a bug.  I have created a bug report on your behalf in our feedback portal and in our Kendo UI GitHub repository.  Please feel free to follow each for updates from our team.

Regards,
Patrick
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
fereshteh
Top achievements
Rank 1
Veteran
answered on 21 Feb 2021, 06:20 AM

hello Patrick

thank you so much for your answer and solution

I will use it and I appreciate your taking the time

 
 
 
 
 
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 22 Feb 2021, 02:22 PM

Hello Fereshteh,

I'm glad this solution has helped and happy to assist!  

Regards,
Patrick
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Frederic
Top achievements
Rank 1
Veteran
Iron
answered on 10 Dec 2021, 09:22 PM

If you don't need to sort that column, if the "field" is not needed, you can just not provide it, and the icon will not be there, without any need for CSS / JS Hack. Use a simple template to display your field value.

https://dojo.telerik.com/@foxontherock/ULaQAKOs/2

Patrick | Technical Support Engineer, Senior
Telerik team
commented on 13 Dec 2021, 09:39 PM

Hi Frederic,

I can confirm the issue has been resolved with version 2021.R2.SP1.  Please feel free to take a look at the following Progress Kendo UI Dojo which demonstrates a working example of hidden columns with the data-menu configuration.

Hope that helps!   

 

Frederic
Top achievements
Rank 1
Veteran
Iron
commented on 13 Dec 2021, 09:46 PM

That's not what we're talking about.   Using the "data-menu" remove the column from available list, like setting column.menu = false in the dataSource.

But, the initial point was to not showing the menu at all on certain columns.  We need to do like the columnMenu: false is applied, but only on certain columns not all.

Patrick | Technical Support Engineer, Senior
Telerik team
commented on 14 Dec 2021, 01:40 PM

My apologies for the miscommunication.  Thank you for the clarification, and for the additional workaround from the original issue by not including a field and using a template.  

Tags
Grid
Asked by
AGB
Top achievements
Rank 1
Iron
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
AGB
Top achievements
Rank 1
Iron
David
Top achievements
Rank 2
Don
Top achievements
Rank 1
Garry
Top achievements
Rank 2
Veteran
fereshteh
Top achievements
Rank 1
Veteran
Frederic
Top achievements
Rank 1
Veteran
Iron
Share this question
or