Open HeaderContextMenu on left click

5 posts, 0 answers
  1. Ryan
    Ryan avatar
    8 posts
    Member since:
    Apr 2018

    Posted 22 Aug 2018 Link to this post

    Hi,

    I want to be able to open the RadGrid headercontextmenu on left click instead of right. Currently when I left click, it just changes the sorting, but the sorting can already be accomplished in the context menu. This is the same issue as this thread: https://www.telerik.com/forums/how-to-show-the-radgrid-context-menu-on-left-click-instead-of-right-click but that was a while ago and currently when I implement, the context menu flashes but then disappears. Is there anyway to achieve the appropriate functionality? Here is my code that implements it: 

     

    <script type="text/javascript">
         function OnColumnClick(sender, args){                 
            args.get_gridColumn().showHeaderMenu(args.domEvent);
         }
    </script>

     

    … In the RadGrid …

     

    <ClientEvents OnColumnClick="OnColumnClick" />

  2.
  3. Attila Antal
    Admin
    Attila Antal avatar
    547 posts

    Posted 24 Aug 2018 Link to this post

    Hi Ryan,

    To prevent the menu flashing, you can cancel the default behavior of the domEvent as follows:
    function OnColumnClick(sender, args) {
        args._domEvent.preventDefault();
        args._domEvent.stopPropagation();
        args.get_gridColumn().showHeaderMenu();
    }

    In case you would like to remove links from the header, you can subscribe the grid to its GridCreated client event and in the event handler hide/remove them accordingly.
    function OnGridCreated(sender, args) {
        $(sender.MasterTableView.HeaderRow).find("a").each(function (index, element) {
            this.outerHTML = this.outerHTML.replace(this.outerHTML, this.text); // replaces the links with text
        });
        $(sender.MasterTableView.HeaderRow).find("input").each(function (index, element) {
            $(this).hide(); // hides the sort icon when sorting was applied
        });
    }

    Kind regards,
    Attila Antal
    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.
  5. Ryan
    Ryan avatar
    8 posts
    Member since:
    Apr 2018

    Posted 25 Aug 2018 in reply to Attila Antal Link to this post

    Hi Attila, 

    Thanks for the reply. It appears that calling the preventDefault and stopPropagation functions have fixing the flashing menu, but the javascript provided for removing the links on the header text does not work. Left clicking the text flashes the contextmenu then refreshes the grid and changes the sort. I tried the code below also, but that does not remove the links either. It appears that the event is being called properly though as it hits the breakpoint. Any ideas?

    $(sender.MasterTableView.HeaderRow).find("a").each(function(index, element){
        element.removeAtrr('href');
        element.removeAtrr('onclick');
    });
  7. Attila Antal
    Admin
    Attila Antal avatar
    547 posts

    Posted 29 Aug 2018 Link to this post

    Hi Ryan,

    If nothing happens, most likely there is a JavaScript error on the page. You can check the by opening the Developer Tools of the browser. For more information on using the Developer tools, you can check out the following Blog Post: Improve Your Debugging Skills with Chrome DevTools

    The removeAttr() is a jQuery method and can be applied for jQuery objects while the element is an HTML DOM element. You can either use the JavaScript method HTML DOM removeAttribute() or cast the HTML element to a jQuery object like $(element).

    E.g.
    element.removeAttribute('href'); // JavaScript
    $(element).removeAttr('href'); // jQuery

    Please try this one to see if that works for you.

    Kind regards,
    Attila Antal
    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.
  8.
  9. Ryan
    Ryan avatar
    8 posts
    Member since:
    Apr 2018

    Posted 30 Aug 2018 Link to this post

    For anyone wondering this solves the issue:

     

    function OnColumnCreated(sender, args) {
           var elem = args.get_column().get_element();
           $(elem).find('a').removeAttr('href').removeAttr('onclick');
    }
Back to Top