Multiple Context menu

4 posts, 0 answers
  1. AHMED
    AHMED avatar
    8 posts
    Member since:
    Nov 2014

    Posted 06 Nov 2019 Link to this post

    Hello

    Please I need help ,first  I am not an expert in Telerik  tools , As you can see in the attachments I have radgrid when User click grid row (context menu 1) appear  when user click Emplyee from cntx1 (Context menu 2) appear and (context menu 1) hide , when user click command from cntx2 call server side method and pass cntx1 & cntxt2  selected values.

     

    thank you

  2. AHMED
    AHMED avatar
    8 posts
    Member since:
    Nov 2014

    Posted 07 Nov 2019 in reply to AHMED Link to this post

    For correction when send pass parameters to server side method pass three values ( Grid Row Value, Employee ID(context 1 selected value),Dir ID (Context 2 selected value)) 
  3. AHMED
    AHMED avatar
    8 posts
    Member since:
    Nov 2014

    Posted 09 Nov 2019 Link to this post

    Please Save me :(
  4. Attila Antal
    Admin
    Attila Antal avatar
    468 posts

    Posted 11 Nov 2019 Link to this post

    Hi Ahmed,

    In order to achieve that you will need to use a combination of client and server side programming.

     

    Create the following RadGrid with all its properties and events.

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="500px" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView ClientDataKeyNames="OrderID, ShipCountry">
        </MasterTableView>
    </telerik:RadGrid>

     

    Bind data to it:

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = Enumerable.Range(1, 3).Select(x => new {
            OrderID = x,
            OrderDate = DateTime.Now.Date.AddHours(x),
            Freight = x*.1,
            ShipName = "Name "+x,
            ShipCountry = "Country " + x
        });
    }

     

    Create the ContextMenu:

    <telerik:RadContextMenu ID="RadContextMenu1" runat="server">
        <Items>
            <telerik:RadMenuItem Text="Item 1"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item 2">
                <Items>
                    <telerik:RadMenuItem Text="Item 1.1"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item 2.1"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item 3.1"></telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item 3"></telerik:RadMenuItem>
        </Items>
    </telerik:RadContextMenu>

     

    Once you the Grid working, implement the functionality demonstrated in the Grid - Context Menu example, with the difference that the menu should be opened when clicking on the row with left mouse button, not the right.

    Wire up the OnRowClick client-side event to RadGrid and in the event handler, open the ContextMenu:

    function GridRowClickEventHandler(sender, args) {
        var menu = $find('<%= RadContextMenu1.ClientID %>');
    
        var evt = args.get_domEvent();
        if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
            return;
        }
    
        var index = args.get_itemIndexHierarchical();
    
        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();
        }
    }

     

    At this point the Menu should open.

    As next, bind the information coming from the Grid row to the menu. To do that, wire up the ClientShowing client-side event to the Menu and in the event handler, you will have access to the target item (the grid row clicked), access its DataKeyValues and attach them as Custom Attributes for the menu item. (For more information on accessing cells, rows, data key values check out the Accessing Cells and Rows article.)

    function OnClientShowing(sender, args) {
        var $currentRow = $(args.get_targetElement()).closest('tr');
        var gridElement = $currentRow.closest('.RadGrid')[0];
    
        if (gridElement && gridElement.control) {
            var menu = sender;
            var grid = gridElement.control;
    
            // Instantiate the GridDataItems collection class to be able to cast rows (TR elements) to GridDataItem objects
            grid.get_masterTableView().get_dataItems();
    
            var gridDataItem = $currentRow[0].control;
            var OrderID = gridDataItem.getDataKeyValue("OrderID");
            var ShipCountry = gridDataItem.getDataKeyValue("ShipCountry");
            var allMenuItems = sender.get_allItems();
    
            menu.trackChanges();
    
            for (var i = 0; i < allMenuItems.length; i++) {
                var menuItem = allMenuItems[i];
    
                menuItem.get_attributes().setAttribute("OrderID", OrderID);
                menuItem.get_attributes().setAttribute("ShipCountry", ShipCountry);
            }
    
            menu.commitChanges();
        }
    }

     

    Lastly, wire up the ItemClick server-side event and in the event handler process the Attributes:

    protected void RadContextMenu1_ItemClick(object sender, RadMenuEventArgs e)
    {
        var OrderID = e.Item.Attributes["OrderID"];
        var ShipCountry = e.Item.Attributes["ShipCountry"];
    }

     

    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.
Back to Top