Multiple Context menu

[AHMED]

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

[AHMED]

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)) 

[AHMED]

Please Save me :(

[Attila Antal]

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