Open HeaderContextMenu on left click

[Ryan]

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

[Attila Antal]

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

[Ryan]

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');
});

[Attila Antal]

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

[Ryan]

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');
}