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

Turn Off Column Menu On Certain Columns

17 Answers 1537 Views

Grid

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

AGB asked on 20 Apr 2016, 02:19 PM

columnmenu.png

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

Accepted

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!

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/.

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

Patrick | Technical Support Engineer, Senior

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

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

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.