This is a migrated thread and some comments may be shown as answers.

Multiple Context menu

3 Answers 103 Views
Menu
This is a migrated thread and some comments may be shown as answers.
AHMED
Top achievements
Rank 1
AHMED asked on 06 Nov 2019, 01:45 PM

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

3 Answers, 1 is accepted

Sort by
0
AHMED
Top achievements
Rank 1
answered on 07 Nov 2019, 08:17 AM
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)) 
0
AHMED
Top achievements
Rank 1
answered on 09 Nov 2019, 05:23 PM
Please Save me :(
0
Attila Antal
Telerik team
answered on 11 Nov 2019, 10:03 AM

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.
Tags
Menu
Asked by
AHMED
Top achievements
Rank 1
Answers by
AHMED
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or