Dynamic Population of Context Menu when an image(inside rad grid) is clicked

[Prashanth Vijayaraghavan]

Hi,

               I would like to pop up the context menu when an image (Downward arrow in the screenshot) is left clicked in radgrid. Moreover, options in the context menu and its navigate url will vary for each row in grid. How would you implement such scenario? In all your examples, you just have one context menu for all the rows in grid. How do you dynamically populate the context menu based on some radgrid row data?

 

Thanks,

Prashanth

[Radoslav]

Hi Prashanth,

To show a context menu, when a user clicks on image, you could try using the following code snippet:

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock">
   <script type="text/javascript">
     function ShowContextMenu(e, index)
     {
          var menu = $find("<%=RadMenu1.ClientID %>");
          menu.show(e);
     }
  </script>
</telerik:RadCodeBlock>

The ShowContextMenu function could be called when the image is clicked. You could try attaching the handler to the image.onclick event on the RadGrid.ItemDataBound event handler:

void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
     if (e.Item is GridDataItem)
     {
         GridDataItem item = e.Item as GridDataItem;
         Image img = item["imageColumn"].FindControl("image") as Image;
         string script = "ShowContextMenu(event,'" + item["ID"].Text + "')";
         img.Attributes.Add("onclick", script);
     }
}

I am sending you a simple example which demonstrates the functionality concerning the showing context menu when the user clicks image.

Additionally to show only the relevant menu items you could try showing/hiding some of the menu items on the client, when the menu is shown or you could try adding the different menus for the different items.
Also you could add the menu's items dynamically on the client. Please check out the following demo which demonstrates this:
http://demos.telerik.com/aspnet-ajax/menu/examples/programming/addremovedisableitemsclientside/defaultcs.aspx

I hope this helps.

Greetings,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[naru]

Hello!

Thought I'd post my question on this thread, because this information got me as far as I am now, working with the ContextMenu :)

So, I used the code Radoslav wrote above, and I've got one menu showing for each row of the Grid.

I was also able to add and remove menu items in the code behind.

My question is: can I have different menus, one for each row of the Grid?

I'm trying to do something like:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

    int itemIdx = e.Item.ItemIndex;

  

    if (e.Item is GridDataItem)

    {

        GridDataItem item = e.Item as GridDataItem;

        string strId = item["Id"].Text;

        int id = Convert.ToInt32(strId);

  

        RadContextMenu menu = new RadContextMenu();

  

        List<Item> elements = GetItems(id);

        foreach (Item element in elements)

        {

           string url = "Page" + element.Value.ToString() + ".aspx";

           menu.Items.Add(new RadMenuItem(element.Description, url));

        }

        //menu.RegisterWithScriptManager = true;

                  

        System.Web.UI.WebControls.Image img =
                (System.Web.UI.WebControls.Image)item["imageColumn"].FindControl("ImageButton1");

  

        //string script = "ShowContextMenu(event,'" + item["Id"].Text + "')";

        string script = "ShowContextMenuPerRow(event,'" + item["Id"].Text + "," + menu.ClientID + "')";

                

        img.Attributes.Add("onclick", script);

    }

}

I don't know if this is possible though... Thought I'd ask first if it is, before submitting a support ticket or looking into a different approach.

Thanks in advance!

[naru]

Hmm... Whether or not this functionality could be achieved with the context menu, I think I'll be using the RadMenu, like this:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    int itemIdx = e.Item.ItemIndex;
    if (e.Item is GridDataItem)
    {
        GridDataItem item = e.Item as GridDataItem;
        string strId = item["Id"].Text;
        int id = Convert.ToInt32(strId);

        RadMenu menu = (RadMenu) item["menuColumn"].FindControl("RadMenu1");
        menu.Items[0].Items.Clear();

        List<Item> elements = GetItems(formId);
        foreach (Item element in elements)
        {
            string url = "Page" + element.Value.ToString() + ".aspx";
            menu.Items[0].Items.Add(new RadMenuItem(element.Description, url));
        }

        if (elements.Count() == 0)
            menu.Items[0].Enabled = false;

    }
}

Simple to use and looks really nice.

[Radoslav]

Hello Naru,

I am glad that you achieved the desired functionality by using the RadMenu. In case you experience any further problems, do not hesitate to contact us again.

Best wishes,
Radoslav
the Telerik team