ContextMenu tutorial

Thursday, February 19, 2004

Ok, in this tutorial we are going to create a new Project which makes use of the ContextMenu control. The tutorial will cover the following things:

Creating ContextMenu's

Linking to ContextMenu's from static links (an image or textual link)
Linking to ContextMenu's from databound links (embedded within a DataGrid)
Handling ContextMenuItem click client-side
Handling ContextMenuItem click server-side

Let's begin:

1) Create a new web application named "Demo_ContextMenu" (delete the WebForm1.aspx page).

2) Create a page named LinksMaster.aspx and set it as the default page for the project.

3) Add the stylesheet to the page:

    <link id="MainStyle" href="DHTMLPopUpMenu.css" type="text/css" rel="stylesheet" />

4) Open the LinksMaster.aspx in design view.

5) Add the ContextMenu assembly to your toolbox.

6) Create the following chunk of Html for the page:

<%@ Page language="c#" Codebehind="LinksMaster.aspx.cs" AutoEventWireup="false" Inherits="Demo_ContextMenu.LinksMaster" %>
<html>
    <head>
        <title>LinksMaster</title>
    </head>
    <body>
        <form id="Form1" method="post" runat="server">
            <table cellpadding="2" width="50%" border="0">
                <tr>
                    <td>
                        <h2><asp:label id="lblPageTitle" runat="server">Dynamic Page</asp:label></h2>
                    </td>
                    <td width="10%"></td>
                </tr>
                <tr>
                    <td>
                         
                    </td>
                    <td width="20%">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

7) Open the page in design view and drag out 2 ContextMenu's and name them "ctxDataBound" and "ctxChangeTitle" as shown here:

The menu named ctxChangeTitle will contain two menu items which allow us to change the Title's text (using a client-side handler) and color (using a server-side handler).

8) Add the following ContextMenuItems to the ContextMenu named "ctxChangeTitle".

<miu:contextmenu id="ctxChangeTitle" runat="server">
    <miu:contextmenuitem id="ctxItemChangeColor" runat="server" Text="Change color" />
    <miu:contextmenuitem 
        id="ctxItemChangeTitle" 
        runat="server"
        ClientNotificationFunction="ChangeTitle"
        Text="Change Title"
        CommandArgument="A New Title" />
</miu:contextmenu>

9) Add the client-side ClientNotificationFunction to the page for the "ctxChangeTitle" ContextMenu:

<script language="javascript">
    function ChangeTitle( sender, e )
    {
        var newTitle = prompt( "Enter the new title", e.MenuItemCommandArgument ) ;
        document.getElementById( "lblPageTitle" ).innerText = newTitle ;
    }
</script>

10) Wire-up the server-side handler for the "ctxChangeTitle" ContextMenu:

private void ctxChangeTitle_ItemClick(object sender, MarkItUp.WebControls.ItemClickEventArgs e)
{
    Color[] colors = {Color.Blue, Color.Red, Color.Green} ;
    Random r = new System.Random() ;
    lblPageTitle.ForeColor = colors[r.Next( 3 )] ;
}

11) Add a context menu link to the top-right cell and associate it with the 2nd Context menu named "ctxChangeTitle".

Run the page, you should now be able to use the ContextMenuLink to change the text and color of the top ContextMenu item.

Now we will add databound menus...

The menu named ctxDataBound will contain a menu item which allow us to change the Title's text to the text of the item on that row of the Grid (using either a client-side handler or a server-side handler).

12) First, create a class to pass through some data to our grid:

public class Foo
{
    public Foo() 
    {
        itemText = String.Empty;
    }

    private string itemText = String.Empty ;
    public string ItemText 
    {
        get { return itemText ; }
        set { itemText = value ; }
    }
}

13) Create the following DataGrid in the page and add a ContextMenuLink to it which references the ItemText property of our databound object.

<asp:datagrid id="grdTest" runat="server" enableviewstate="False" width="90%" autogeneratecolumns="False"
    horizontalalign="Center">
    <headerstyle backcolor="#b9d1f4" />
    <alternatingitemstyle backcolor="White" />
    <columns>
        <asp:templatecolumn>
            <itemtemplate>
                <miu:contextmenulink id="ctxChangeTitleFromGrid" 
                    runat="server" 
                    ImageUrl="Images/PopUpIcon.gif" 
                    contextmenutoopen="ctxDataBound" 
                    commandargument='<%# DataBinder.Eval(Container.DataItem, "ItemText") %>' />
            </itemtemplate>
        </asp:templatecolumn>
        <asp:boundcolumn datafield="ItemText" />
    </columns>
</asp:datagrid>

14) Add some code to databind data to the grid:

private void Page_Load(object sender, System.EventArgs e)
{
    ArrayList list = new ArrayList() ;
    string[] texts = {"Rob", "Pete", "Jeff", "Jim", "Darren", 
        "Rob", "Pete", "Jeff", "Jim", "Darren", "Rob", "Pete", 
        "Jeff", "Jim", "Darren", "Rob", "Pete", "Jeff", "Jim", 
        "Darren", "Rob", "Pete", "Jeff", "Jim", "Darren" } ;
    Foo obj ;
    for( int i = 0; i < texts.Length; i++ )
    {
        obj = new Foo() ;
        obj.ItemText = texts[i] ;
        list.Add(obj) ;
    }
    grdTest.DataSource = list ;
    grdTest.DataBind() ;
}

15) Wire-up the server-side handler for the "ctxDataBound" ContextMenu:

private void ctxDataBound_ItemClick(object sender, MarkItUp.WebControls.ItemClickEventArgs e)
{
    lblPageTitle.Text = e.LinkCommandArgument ;
}

16) Add a ContextMenuItem to the ContextMenu named "ctxDataBound".

<miu:contextmenu id="ctxDataBound" runat="server">
    <miu:contextmenuitem id="ctxItemChangeTitle2" runat="server" text="Change Title" />
</miu:contextmenu>

Run the page:

No Comments