Inherit the asp.net menu control

I want to make a very specific menu, so I decided on creating a custom menu control like this:

public class MyMenu : System.Web.UI.WebControls.Menu

I want to override the existing menu control to be able to use the databinding capabilities, I want to use this menu with a sitemapprovider.

To be able to create my own menu HTML output I need to override the Render method:

protected override void Render(System.Web.UI.HtmlTextWriter writer)

Once you do that and don’t want to call the base.Render method, you are going to run into this runtime error:

Microsoft JScript runtime error: Unable to get value of the property 'tagName': object is null or undefined.

This is because the scripts from the asp.net menu control expect certain elements. The fix for this is to override the OnPreRender method and do NOT call the base:

protected override void OnPreRender(EventArgs e)
{
     //prevent scripts from loading
     //base.OnPreRender(e);
}

Now the control works, but when you set the DataSourceID the Items collection stays empty. I took me a while to find out this one: the solution is to call the PerformDataBinding method in the Render method. After this call you can use the Items collection to build your menu:

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
    this.PerformDataBinding();

    writer.Write("<div id='menu'>");

    foreach (MenuItem item in Items)
    {
        ..your code here..
    }

    writer.Write("</div>");
}

Hope this helps.