Context menu in Grid

[Andy Green]

Hi Guys

I have a requirement to have a context menu on a grid row triggered when a cell is clicked.

I have this working, using the following :

​

RowDataItem("Event").Attributes("href") = "#"
RowDataItem("Event").Attributes("onclick") = [String].Format("return showPriorityMenu(event)")


function showPriorityMenu(e) {

    var contextMenu = $find("<%= rmPriority.ClientID%>");
                    $telerik.cancelRawEvent(e);
                    if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {
                        contextMenu.show(e);
                    }
                }

What I can't seem to do is get a handle in the idex and at the server the row(ID) data.

I have also had a play by setting the clientEvents on the grid - this works following your examples where I can get the row id server side and update the row and perform the AJAX update.

The trouble with this approach is that the entire row is the trigger for the event, not just a targeted cell.

I have tried playing with the JS to get (Sender, EventArg) in to the JS from my posted code, btu can't figure it out.

How can I do this.

Andy  

[Konstantin Dikov]

Hello Andy,

There could be different approaches for achieving the desired result.

With the approach you are currently using you could just add the GridDataItem.ItemIndexHierarchical as an argument in your showPriorityMenu() function:

Protected Sub RadGrid1_ItemCreated(sender As Object, e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim item As GridDataItem = TryCast(e.Item, GridDataItem)
        item("Event").Attributes.Add("onclick", "return showPriorityMenu(event, " + item.ItemIndexHierarchical + ")")
    End If
End Sub

Another solution would be to use your current approach, but to combine it with handling the client-side OnRowClick event:

<telerik:RadCodeBlock runat="server">
    <script type="text/javascript">
        var toShowPriorityMenu = false;
        var priorityMenuShowEvent = null;
        function rowClick(sender, args) {
            if (toShowPriorityMenu) {
                var contextMenu = $find("<%=RadContexMenu1.ClientID%>");
                contextMenu.show(priorityMenuShowEvent);
            }

            toShowPriorityMenu = false;
            priorityMenuShowEvent = null;
        }

        function showPriorityMenu(event) {
            toShowPriorityMenu = true;
            priorityMenuShowEvent = event;
        }
    </script>
</telerik:RadCodeBlock>

The above will show the context menu if the showPriorityMenu was called that (when the cell was clicked).

Hope that helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Andy Green]

Thank you, but this isn't working for me.

I have this in my item created event:

Protected Sub rdPhlebotomy_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles rdPhlebotomy.ItemCreated


    If TypeOf e.Item Is GridDataItem Then
        Dim item As GridDataItem = TryCast(e.Item, GridDataItem)
        item("Event").Attributes.Add("onclick", "return showPriorityMenu(event, " + item.ItemIndexHierarchical + ")")
    End If

And this is my JS in the page:

function showPriorityMenu(sender, eventArgs) {

    var menu = $find("<%=rmPriority.ClientID%>");

             var evt = eventArgs.get_domEvent();

             if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                 return;
             }

             var index = eventArgs.get_itemIndexHierarchical();
             document.getElementById("radGridClickedRowIndex").value = index;

             sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

             menu.show(evt);

             evt.cancelBubble = true;
             evt.returnValue = false;

             if (evt.stopPropagation) {
                 evt.stopPropagation();
                 evt.preventDefault();
             }
         }

This line fails - var evt = eventArgs.get_domEvent(); with the error object doesn't support property or method 'get_domEvent()'

What could this be. I have not tried the second approach yet.

Andy

[Konstantin Dikov]

Hello Andy,

When you are adding a handler for the "onclick" event for the cell, the event will fire for the TD element and not for the RadGrid, so the sender in your scenario will not be the grid. Actually, with your settings you will have the DOM event as first argument and the index as second (event, index).

function showPriorityMenu(event, index){
    ....
}

However, please give a try to the second approach and let me know if everything is working correctly with it.


Regards,
Konstantin Dikov
Telerik