Turn Off Column Menu On Certain Columns

17 posts, 1 answers
  1. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

    Posted 20 Apr 2016 Link to this post

    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

  2.
  3. Answer
    Patrick
    Admin
    Patrick avatar
    255 posts

    Posted 20 Apr 2016 Link to this post

    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!
     
  5. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

    Posted 25 Apr 2016 in reply to Patrick Link to this post

    Thanks Patrick,

     

    That works a treat.

     

    Regards

    Alan

  7. Patrick
    Admin
    Patrick avatar
    255 posts

    Posted 26 Apr 2016 Link to this post

    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!
     
  8.
  9. David
    David avatar
    4 posts
    Member since:
    Aug 2018

    Posted 12 Dec 2018 in reply to Patrick Link to this post

    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?
  11. Patrick
    Admin
    Patrick avatar
    255 posts

    Posted 13 Dec 2018 Link to this post

    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.
  13. Don
    Don avatar
    11 posts
    Member since:
    Apr 2018

    Posted 21 Aug 2019 Link to this post

    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.
  14.
  15. Patrick
    Admin
    Patrick avatar
    255 posts

    Posted 22 Aug 2019 Link to this post

    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.
  17. Garry
    Garry avatar
    49 posts
    Member since:
    Sep 2012

    Posted 22 Jan in reply to Patrick Link to this post

    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.

  19. Patrick
    Admin
    Patrick avatar
    255 posts

    Posted 22 Jan Link to this post

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

  20.
  21. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 17 Feb Link to this post

    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
  23. Patrick
    Admin
    Patrick avatar
    255 posts

    Posted 17 Feb Link to this post

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

  25. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 18 Feb in reply to Patrick Link to this post

    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

     
  26.
  27. Patrick
    Admin
    Patrick avatar
    255 posts

    Posted 18 Feb Link to this post

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

  29. Patrick
    Admin
    Patrick avatar
    255 posts

    Posted 19 Feb Link to this post

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

  31. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 21 Feb in reply to Patrick Link to this post

    hello Patrick

    thank you so much for your answer and solution

    I will use it and I appreciate your taking the time

  32.
  33. Patrick
    Admin
    Patrick avatar
    255 posts

    Posted 22 Feb Link to this post

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

Back to Top