Previous parts:

In this part of the series we’ll be adding a context menu to our SPGridView using the SPMenuField control. Using the MenuField can be a bit tricky the first time round since there are a lot of properties involved. But when you’ve created your first context menu, it turns out to be not that hard.

Here is a picture of what we’ll be working towards, a context menu with a single menu option: viewing a sales report. We will not be implementing the report itself, that would be outside the scope of this article.


To create our context menu, we’ll replace one of our columns with an instance of the SPMenuField control. You don’t HAVE to do that but typically the Title column is the regular place to put the context menu. The MenuField will take care of basic databinding, just like the BoundField and add our context menu to the field. Actually, it uses the HyperLinkField so it creates a URL to follow when we click on the field. That makes our task two-fold; we’ll need to configure the context menu as well as the URL used by the HyperLinkField.

The following code in our GenerateColumns method creates our very bare-bone context menu:

const string MENUTEMPLATEID = "NameColumnMenuTemplate";
SPMenuField menuColumn = new SPMenuField();
menuColumn.MenuTemplateId = MENUTEMPLATEID;
menuColumn.TextFields = "Name";
menuColumn.SortExpression = "Name";
menuColumn.HeaderText = "NameH"; 
MenuTemplate menuTemplate = new MenuTemplate();
MenuItemTemplate menuItem = new MenuItemTemplate( "View Sales Report", "/_layouts/images/usage.gif" );
menuItem.ClientOnClickNavigateUrl = "viewReport.aspx";
menuTemplate.Controls.Add( menuItem );
this.Controls.Add( menuTemplate );
grid.Columns.Add( menuColumn );

NOTE: Make sure you add the MenuTemplate to the controls collection BEFORE the MenuField or you will receive an error when rendering the GridView.

We haven’t done anything to configure the URL used by the HyperLinkField. The default behaviour is to open the context menu so we could stop here. But configuring the URLs of both the HyperLinkField and the context menu itself can be tricky so let’s expand on that a bit.

To configure the URL used when clicking on our field we need to set two properties on the MenuField: NavigateUrlFields and NavigateUrlFormat. NavigateUrlFields contains a comma-separated string of column names whose values we want to expose to the URL. The NavigateUrlFormat property contains a format string that uses the columns specified by the NavigateUrlFields property in order to build the URL.

Let’s add two lines to our code:

menuColumn.NavigateUrlFields = "ID,Region";
menuColumn.NavigateUrlFormat = "viewReport.aspx?id={0}&r={1}";

Now if we click the column that has ID 3 and Region Asia the resulting URL would be viewReport.aspx?id=3&r=Asia.

Configuring the URLs for our menu items is slightly different. We need to use the TokenNameAndValueFields property of the MenuField. This property provides a mapping between URL tokens and column names, like so:

menuColumn.TokenNameAndValueFields = "TOKEN1=ID,TOKEN2=Region";

The names of the tokens are arbitrary, you can use whatever you want. We can now use these tokens in the ClientOnClickNavigateUrl property of our menu items:

menuItem.ClientOnClickNavigateUrl = "viewReport.aspx?id=%TOKEN1%&r=%TOKEN2%";

The result will be identical to our field URL above.

Well that’s it for Part 3, and long overdue it was! In Part 4 I am planning to discuss Grouping unless one of you has something he or she would like to see next. If you do, please don’t hesitate to let me know.

If you liked this post, please click on one of the advertisements below. Thanks!

0 Responses to “Building A SPGridView Control – Part 3: Adding a Context Menu using the SPMenuField”

  1. No Comments

Leave a Reply