How To: RadGridView for Silverlight row context menu in three simple steps

Thursday, April 09, 2009 by Vladimir Enchev | Comments 9

To enable RadContextMenu for every grid data row you should do:

1) Handle RowLoaded event for the grid and create RadContextMenu:

void RadGridView1_RowLoaded(object sender, RowLoadedEventArgs e)
{
    if (!(e.Row is GridViewHeaderRow) && !(e.Row is GridViewNewRow))
    {
        RadContextMenu rowContextMenu = new RadContextMenu(); // create menu
        StyleManager.SetTheme(rowContextMenu, StyleManager.GetTheme(RadGridView1)); // set menu Theme

        // create menu items
        rowContextMenu.Items.Add(new RadMenuItem() { Header = "Show row ID property value" });
        rowContextMenu.Items.Add(new RadMenuItem() { Header = "Item2", IsEnabled = false });
        rowContextMenu.Items.Add(new RadMenuItem() { Header = "Item3", IsEnabled = false });
        
        // add menu events
        rowContextMenu.AddHandler(RadMenuItem.ClickEvent, new RoutedEventHandler(OnMenuItemClick));
        rowContextMenu.Opened += new RoutedEventHandler(OnMenuOpened);
        
        // attach menu
        RadContextMenu.SetContextMenu(e.Row, rowContextMenu);
    }
}

2) Select the grid row on context menu open:

void OnMenuOpened(object sender, RoutedEventArgs e)
{
    GridViewRow row = ((RadRoutedEventArgs) e).OriginalSource as GridViewRow;
    if (row != null)
    {
        row.IsSelected = row.IsCurrent = true;
    }
}

3) Perform desired action when menu item is clicked:

void OnMenuItemClick(object sender, RoutedEventArgs e)
{
    RadMenuItem clickedItem = ((RadRoutedEventArgs) e).OriginalSource as RadMenuItem;
    if (clickedItem != null)
    {
        string header = Convert.ToString(clickedItem.Header);

        object selectedItem = RadGridView1.SelectedItem;

        switch (header)
        {
            case "Show row ID property value":
                int ID = ((MyBusinessObject)selectedItem).ID;
                DialogParameters parameters = new DialogParameters();
                parameters.Content = String.Format("ID: {0}", ID);
                parameters.Header ="Selected row ID property value:";
                parameters.Theme = StyleManager.GetTheme(RadGridView1);
                parameters.IconContent = null;
                RadWindow.Alert(parameters);
                break;
            default:
                break;
        }
    }
}

Please make sure also that you have <param name="windowless" value="true" /> for your SIlverlight object declaration!

Enjoy!

[Download]

Email to a friend

9 Comments

Telerik fan 09 Apr

Great to see that we have such SL demo with the Telerik controls runnable! Do you intend to include more advanced version of RadGridView/RadContextMenu integration with editing options as in this AJAX example: http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandmenu/defaultcs.aspx?product=grid to the SL online demos in the future?
Vlad 10 Apr

Hi Telerik fan,

Generally if the grid is bound to ObservableCollection<T> of an object implementing INotifyPropertyChanged interface you will be able to add, delete and edit records very easily using this demo. For example:

switch (header)
        {
            case "Delete record":
                ObservableCollection<MyBusinessObject> collection = RadGridView1.ItemsSource as ObservableCollection<MyBusinessObject>;
                if (collection != null)
                {
                    collection.Remove((MyBusinessObject) RadGridView1.SelectedItem);
                }
                break;
            default:
                break;
        }

Vlad
Telerik fan 10 Apr

I think I get your point. My thought was that a slick demo in the Silverlight QSF will be much more noticeable than that in the blog post.

Thanks!
Vlad 10 Apr

Hi Telerik fan,

Indeed there will be similar example in our SP1 demos.

Thanks!
Krlos 29 Jul

<param name="windowless" value="true" />

You hace saved me, alot of time. Thanks
Marc Roussel 03 Mar

I'm facing problem here since the AddHantler mention in this example doesn'T work according to the parameters asked in The current version
A 21 Apr

Are you crazy doing such a coding just for menu?
Use MVVM and just bindings.
This will save you a lot of times and health :)
Zullu 22 Jul
Nice, I like this simple approach.
But not sure where this change has to be made.
<param name="windowless" value="true" />
Can you please elaborate a bit more. Which file, location ???

Also, how do we set the image for the Icon property for the Menu Items in your code below:
// create menu items
```
rowContextMenu.Items.Add(new RadMenuItem() { Header = "Show row ID property value" });
```
And how do add, SubMenus to these?
Any help !!!

Thanks,
Zullu.
Zullu 22 Jul

BTW, "A" before my post above is referring to getting this done using MVVM.
"A", can you post an example here for the benefit of all.

I am surely curious to know about that.