Context menu in Grid

4 posts, 0 answers
  1. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 31 Mar 2014 Link to this post

    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  
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 03 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 03 Apr 2014 in reply to Konstantin Dikov Link to this post

    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
  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 08 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top