Add Telerik ASP.NET AJAX Menu to Interprise 5.6.22

by jasonrshaver 6. September 2011 21:43

Setup

This example is assuming Interprise 5.6.22 and Telerik.Web.UI version 2011.2.712, but any recent Telerik version should work fine.

Add the following DLLs to the \bin directory.  You can locate them in your \Program Files directory.

  • Telerik.Web.Design.dll (not needed for most people, but might as well put it there)
  • Telerik.Web.UI.dll
  • Telerik.Web.UI.Skins.dll (not needed if you don’t want to use any embedded skins)
  • Telerik.Web.UI.XML

Customize App_Code\SkinBase.cs

Edit your App_Code\SkinBase.cs file, but make sure you make a backup.  It is really easy to kill your site.  Also note that if you start changing this file on a live site, you can cause errors for customers who happen to be using the site at the time. 

Add the following code to the “Find Menu” region (around Line 592)

  1. private void FindTelerikMenu(Control context, List<WebControl> foundMenus)
  2. {
  3.     foreach (Control ctrl in context.Controls)
  4.     {
  5.         if (ctrl is Telerik.Web.UI.RadMenu) // || ctrl is ComponentArt.Web.UI.Menu)
  6.         {
  7.             foundMenus.Add(ctrl as WebControl);
  8.         }
  9.         else
  10.         {
  11.             // recurse  
  12.             FindTelerikMenu(ctrl, foundMenus);
  13.         }
  14.     }
  15. }

Add the following code to the “SetupMenu” region (around line 432)

  1. private void SetupTelerikMenu()
  2. {
  3.     HtmlForm frm = this.ThisForm;
  4.     if (frm == null)
  5.         return;
  6.  
  7.     if (frm.FindControl("ScriptManager") == null)
  8.     {
  9.         Panel pnlScriptManager = new Panel();
  10.         pnlScriptManager.ID = "pnlTelerikScriptManager";
  11.  
  12.         RadScriptManager manager = new RadScriptManager();
  13.         manager.ID = "ScriptManager";
  14.         manager.EnableScriptCombine = false;
  15.         frm.Controls.AddAt(0, manager);
  16.  
  17.         // allow page to register scripts and web services
  18.         RegisterScriptsAndServices(manager);
  19.     }
  20.  
  21.     List<WebControl> foundMenus = new List<WebControl>();
  22.     FindTelerikMenu(this, foundMenus);
  23.  
  24.     if (foundMenus.Count == 0)
  25.         return;
  26.  
  27.     string randomId = Guid.NewGuid().ToString("N").Substring(0, 5);
  28.     // make ready the scripts
  29.     StringBuilder script = new StringBuilder();
  30.     script.AppendFormat("<script type=\"text/javascript\" language=\"Javascript\">\n");
  31.     script.AppendFormat("    function loadMenu_{0}() {{\n", randomId);
  32.  
  33.     foreach (WebControl foundMenu in foundMenus)
  34.     {
  35.         Telerik.Web.UI.RadMenu telerikMenu = foundMenu as Telerik.Web.UI.RadMenu;
  36.  
  37.         string menuId = telerikMenu.ID;
  38.         string containerId = menuId + "_Panel";
  39.         Panel placeHolder = new Panel();
  40.         placeHolder.ID = containerId;
  41.         int originalIndex = FindParentIndex(telerikMenu);
  42.  
  43.         Control parentControl = telerikMenu.Parent;
  44.         parentControl.Controls.Remove(telerikMenu);
  45.         parentControl.Controls.AddAt(originalIndex, placeHolder);
  46.         frm.Controls.Add(telerikMenu);
  47.         telerikMenu.Style["display"] = "none";
  48.  
  49.         SiteMapDataSource ds = new SiteMapDataSource();
  50.         ds.Provider = ISESiteMapProviderFactory.Instance.GetProvider(ThisCustomer.LocaleSetting);
  51.         telerikMenu.DataSource = ds;
  52.         telerikMenu.DataBind();
  53.  
  54.         script.AppendFormat("        var menu_{0} = document.getElementById('{0}');\n", menuId);
  55.         script.AppendFormat("        var panel_{0} = document.getElementById('{0}');\n", containerId);
  56.         script.AppendFormat("        if(menu_{0} && panel_{1}) {{\n", menuId, containerId);
  57.         script.AppendFormat("            panel_{1}.appendChild(menu_{0});\n", menuId, containerId);
  58.         script.AppendFormat("            menu_{0}.style.display = '';\n", menuId, containerId);
  59.         script.AppendFormat("        }}\n");
  60.     }
  61.     script.AppendFormat("    }}\n");
  62.     script.AppendFormat("    $add_windowLoad(loadMenu_{0});\n", randomId);
  63.     script.AppendFormat("</script>\n");
  64.  
  65.     Page.ClientScript.RegisterStartupScript(this.GetType(), randomId, script.ToString());
  66. }

Change the OnPreRender method (around 396) from SetupMenu() To SetupTelerikMenu().  If you ever wish to undo these changes, this is really the only line that you need to change back.

Changing Your Template

In your template.ascx for your skin (\Skins\Skin_1 is the default), add the following with the other Registers at the top (line 3 or 4 usually):

  1. <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

Replace everything in the “horizNav” div with the following:

  1. <!-- TOP MENU -->                                                
  2. <telerik:RadMenu runat="server" ID="aspnetMenu" Skin="TTX" EnableEmbeddedSkins="false" />
  3. <!-- END TOP MENU -->

If you want to use a default Telerik skin, replace TTX with the name of the skin you want to use and change EnableEmbeddedSkins to true.

For a custom skin, replace ‘TTX’ with the name of your custom CSS skin for the menu and add the required CSS entries such as:

  1. /*
  2.     Highligh color = D94A46 (Red)
  3.     Font Color = AAAAAA (darker gray)
  4.     Background color = F8F8F8 (light silver)
  5. */
  6.     .RadMenu_TTX
  7.     {
  8.         text-align: left;
  9.         margin: 0px;
  10.         padding: 2px;
  11.     }
  12. /* Root */
  13.     .RadMenu_TTX .rmLink
  14.     {
  15.         line-height: 24px;
  16.         color: Black;
  17.         position: relative;
  18.         display: inline-block !important;
  19.     }
  20.     .RadMenu_TTX .rmText
  21.     {
  22.         color: #AAA;  
  23.         text-decoration: none;
  24.         font-weight: bold;
  25.         font-size: 12pt;    
  26.     }
  27.     .RadMenu_TTX .rmLink:hover
  28.     {
  29.     }
  30.     .RadMenu_TTX .rmFocused,
  31.     .RadMenu_TTX .rmExpanded,
  32.     .RadMenu_TTX .rmText:hover
  33.     {
  34.         color: #D94A46;     
  35.     }
  36.  
  37. /* Sub Menus */
  38.     .RadMenu_TTX .rmGroup
  39.     {
  40.         border: 1px solid #AAA;
  41.     }
  42.     .RadMenu_TTX .rmGroup .rmLink
  43.     {
  44.         background: White;
  45.     }
  46.     .RadMenu_TTX .rmGroup .rmFocused,
  47.     .RadMenu_TTX .rmGroup .rmExpanded,
  48.     .RadMenu_TTX .rmGroup .rmText
  49.     {
  50.         background: White;
  51.         font-weight: normal;
  52.         font-size: 10pt;    
  53.         color: #AAA;
  54.     }
  55.     .RadMenu_TTX .rmGroup .rmLink:hover
  56.     {
  57.         background: #D94A46;
  58.     }
  59.     .RadMenu_TTX .rmGroup .rmText:hover
  60.     {
  61.         color: #D94A46;     
  62.     }

And you should be done.  All-in-all, it will take you longer to get your CSS file right than it will to do the ‘hard stuff’

Tags: , , ,

Blog

Submit to DotNetKicks...
Permalink | Comments (0)

About the author

I am a software developer working for Microsoft in Redmond, WA.  In addition, my wife and I own TTXOnline, what is likely the 3rd largest table tennis store in the US.

Month List

Page List