How to programatically bind to RadManu with custom template

[Robin]

Hello, 

I am developing a RadMenu similar to the one from this demo: http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx.

I would like to know how to bind that menu programmatically from C# Code. I need to load menu from database and couldn't find out how to do that. I also need to have thumbnail image for each parent menu same as from that demo. If there is any sample code available, please let me know. Currently, I am populating the menu manually and you can see the sample code below.

<telerik:RadMenu runat="server" ID="RadMenu1" Skin="Glow" Width="100%" Visible="false"
    OnItemClick="RadMenu1_ItemClick">
    <DefaultGroupSettings Height="270px" />
    <Items>
        <telerik:RadMenuItem Text="Home" NavigateUrl="Dashboard.aspx">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Configuration">
            <ContentTemplate>
                <telerik:RadSiteMap runat="server" ID="RadSiteMap1" Skin="Glow" CssClass="itemContent configuration">
                    <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                    <Nodes>
                        <telerik:RadSiteMapNode Text="General Settings" NavigateUrl="GeneralSetting.aspx"></telerik:RadSiteMapNode>
                        <telerik:RadSiteMapNode Text="Network Configuration" NavigateUrl="NetworkConfigs.aspx"></telerik:RadSiteMapNode>
                        <telerik:RadSiteMapNode Text="Security Cameras" NavigateUrl="SecurityCameras.aspx"></telerik:RadSiteMapNode>
                   </Nodes>
                </telerik:RadSiteMap>
            </ContentTemplate>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Administration">
            <ContentTemplate>
                <telerik:RadSiteMap runat="server" ID="RadSiteMap2" Skin="Glow" CssClass="itemContent administration">
                    <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                    <Nodes>
                        <telerik:RadSiteMapNode Text="Admin Menu 1" NavigateUrl="AdminMenu1.aspx"></telerik:RadSiteMapNode>
                        <telerik:RadSiteMapNode Text="Admin Menu 2" NavigateUrl="AdminMenu2.aspx"></telerik:RadSiteMapNode>
                        <telerik:RadSiteMapNode Text="Admin Menu 3" NavigateUrl="AdminMenu3.aspx"></telerik:RadSiteMapNode>
                   </Nodes>
                </telerik:RadSiteMap>
            </ContentTemplate>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Setup">
            <ContentTemplate>
                <telerik:RadSiteMap runat="server" ID="RadSiteMap3" Skin="Glow" CssClass="itemContent setup">
                    <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                    <Nodes>
                        <telerik:RadSiteMapNode Text="Setup Menu 1" NavigateUrl="Setup1.aspx"></telerik:RadSiteMapNode>
                        <telerik:RadSiteMapNode Text="Setup Menu 2" NavigateUrl="Setup2.aspx"></telerik:RadSiteMapNode>
                        <telerik:RadSiteMapNode Text="Setup Menu 3"></telerik:RadSiteMapNode>
                        <telerik:RadSiteMapNode Text="Setup Menu 4" NavigateUrl="Setup4.aspx"></telerik:RadSiteMapNode>
                    </Nodes>
                </telerik:RadSiteMap>
            </ContentTemplate>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Logout" CssClass="menu-logout" Value="logout">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Thanks in advanced,
Robin

[Robin]

Hello again!

I guess there is no simple binding for this kind of menu. So, I decided to load menu programatically like below but I can't able to populate child menu items. This only generated parent menu items. Is my code correct to add items to content template? (Please see line 26 and 27)

01.private void LoadMenu()
02.{
03.    SysReferencesBL l_ref = new SysReferencesBL(General.GetConnectionString(), General.GetLang());
04.    DataTable l_menuTable = l_ref.GetMenuList();
05.
06.    menuMain.Items.Clear();
07.    DataRow[] l_Parents = l_menuTable.Select("ParentMenuID IS NULL");
08.    foreach (DataRow l_parentRow in l_Parents)
09.    {
10.        RadMenuItem l_menuItem = new RadMenuItem();
11.        l_menuItem.Text = l_parentRow["Name"].ToString();
12.        l_menuItem.NavigateUrl = l_parentRow["URL"].ToString();
13.
14.        DataRow[] l_Childs = l_menuTable.Select("ParentMenuID=" + Utility.Obj2Int(l_parentRow["SysMenuID"]));
15.        if (l_Childs.Length > 0)
16.        {
17.            RadSiteMap l_childItem = new RadSiteMap();
18.            l_childItem.DefaultLevelSettings.ListLayout.RepeatColumns = 3;
19.            l_childItem.CssClass = "itemContent " + l_parentRow["IconClassName"];
20.
21.            foreach (DataRow l_childRow in l_Childs)
22.            {
23.                RadSiteMapNode l_ChildMenu = new RadSiteMapNode(l_childRow["Name"].ToString(), l_childRow["URL"].ToString());
24.                l_childItem.Nodes.Add(l_ChildMenu);
25.            }
26.            MenuItemContentTemplateContainer l_Container = new MenuItemContentTemplateContainer(l_menuItem);
27.            l_Container.Controls.Add(l_childItem);
28.        }
29.
30.        menuMain.Items.Add(l_menuItem);
31.    }
32.}

Thanks in advance,
Robin

[Bozhidar]

Hello,

From what I understand you want to add the SiteMap items inside the template programmatically. In order to do so, you will have to define the template on the server-side, the construct the SiteMap manually. Please review the following help article, which will guide you in constructing your templates on the server:
http://www.telerik.com/help/aspnet-ajax/menu-templates-runtime.html

Regards,
Bozhidar
Telerik

 

 

[Robin]

Thanks for the reply, Bozhidar.

I've been trying this for several days and still can't make it happen. The reference url use simple label and mine is quite complicated. I've prepared sample code below and please advice what's wrong with my one :(

Sample.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        body {
            background-color: silver;
        }

        div.main-container {
            width: 1000px;
            margin: 0 auto;
            display: block;
        }

            div.main-container .RadMenu {
                margin: 0 auto;
                font-size: 16px;
            }

        html .main-container .RadMenu_Glow .rmRootGroup {
            position: relative;
            width: 100%;
        }

        html div.RadMenu_Glow .rmGroup,
        html div.RadMenu_Glow .rmPopup {
            background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
        }

        .main-container .RadMenu .rmPopup {
            width: 968px;
        }

        .RadMenu {
            z-index: 10!important;
            display: block;
        }

        html .RadMenu_Glow .rmHorizontal .rmRootLink .rmText {
            padding: 8px 0px;
        }

        html .main-container .RadMenu_Glow .rmHorizontal .rmItem {
            height: 45px;
            position: static;
        }

        html .main-container .RadMenu_Glow .rmHorizontal .rmRootLink:hover .rmText,
        html .main-container .RadMenu_Glow .rmHorizontal .rmRootLink.rmFocused .rmText,
        html .main-container .RadMenu_Glow .rmHorizontal .rmRootLink.rmSelected .rmText,
        html .main-container .RadMenu_Glow .rmHorizontal .rmRootLink.rmExpanded .rmText {
            padding-top: 4px;
        }

        .main-container .RadSiteMap .rsmColumnWrap {
            margin-bottom: 0px;
        }

        .main-container .RadSiteMap_Glow .rsmOneLevel .rsmLink,
        .main-container .RadSiteMap_Glow .rsmTwoLevels .rsmLevel1 .rsmLink,
        .main-container .RadSiteMap_Glow .rsmThreeLevels .rsmLevel2 .rsmLink,
        .main-container .RadSiteMap_Glow .rsmManyLevels .rsmLevel3 .rsmLink {
            font-size: 14px;
            color: white;
        }

        .main-container .itemContent {
            padding: 10px 0px 30px 150px;
            background-repeat: no-repeat;
            background-position: 10px center;
        }

        .main-container .configuration, .main-container .administration, .main-container .setup {
            background-size: 100px 100px;
            padding-top: 30px;
            padding-bottom: 30px;
        }

        .main-container .configuration {
            background-image: url("../Images/Config.png");
        }

        .main-container .administration {
            background-image: url("../Images/Administration.png");
        }

        .main-container .setup {
            background-image: url("../Images/Setup.png");
        }

        .main-container .title {
            color: #FFFFFF;
            line-height: 76px;
            margin-left: 254px;
            text-decoration: underline;
            font-size: 14px;
        }

        .main-container div.RadSiteMap .rsmItem {
            color: #FFFFFF;
            list-style-type: square;
            margin-left: 5px;
        }

        .main-container .rsmColumnWrap {
            *display: none;
        }

        div.RadSiteMap .rsmThreeLevels .rsmLevel1 .rsmLink,
        div.RadSiteMap .rsmThreeLevels .rsmLevel1 .rsmTemplate,
        div.RadSiteMap .rsmTwoLevels .rsmLevel1 .rsmLink,
        div.RadSiteMap .rsmTwoLevels .rsmLevel1 .rsmTemplate,
        div.RadSiteMap .rsmOneLevel .rsmItem .rsmLink,
        div.RadSiteMap .rsmOneLevel .rsmItem .rsmTemplate {
            border-bottom: 0 none;
            display: inline-block;
            margin-bottom: 0;
            padding-left: 3px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="main-container">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="WebBlue" />

            <telerik:RadMenu runat="server" ID="RadMenu1" Skin="Glow" Width="100%">
                <DefaultGroupSettings Height="270px" />
                <Items>
                    <telerik:RadMenuItem Text="Menu 1" NavigateUrl="Sample1.aspx">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Menu 2">
                        <ContentTemplate>
                            <telerik:RadSiteMap runat="server" ID="RadSiteMap1" Skin="Glow" CssClass="itemContent configuration">
                                <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Menu 2.1" NavigateUrl="Sample21.aspx"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Menu 2.2" NavigateUrl="Sample22.aspx"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Menu 2.3" NavigateUrl="Sample23.aspx"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Menu 2.4" NavigateUrl="Sample24.aspx"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </ContentTemplate>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Menu 3">
                        <ContentTemplate>
                            <telerik:RadSiteMap runat="server" ID="RadSiteMap2" Skin="Glow" CssClass="itemContent administration">
                                <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Menu 3.1" NavigateUrl="Sample31.aspx"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Menu 3.2" NavigateUrl="Sample32.aspx"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Menu 3.3" NavigateUrl="Sample33.aspx"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Menu 3.4" NavigateUrl="Sample34.aspx"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </ContentTemplate>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Menu 4" >
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>

            <div style="height:300px"></div>

            <telerik:RadMenu runat="server" ID="RadMenu2" Skin="Glow" Width="100%">
                <DefaultGroupSettings Height="270px" />
            </telerik:RadMenu>
        </div>
    </form>
</body>
</html>

Sample.aspx.cs

public partial class SampleMenu : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            LoadMenu();
        }
    }

    protected override void OnInit(EventArgs e)
    {
        RadMenu2.ItemTemplate = new CustomTemplate();
        base.OnInit(e);
    }

    public static DataTable GetMenuData()
    {
        DataTable l_Table = new DataTable();
        l_Table.Columns.Add("SysMenuID");
        l_Table.Columns.Add("ParentMenuID");
        l_Table.Columns.Add("Name");
        l_Table.Columns.Add("URL");

        l_Table.Rows.Add("1", null, "Menu 1", "Sample1.aspx");
        l_Table.Rows.Add("2", null, "Menu 2", "Sample2.aspx");
        l_Table.Rows.Add("3", null, "Menu 3", "Sample3.aspx");
        l_Table.Rows.Add("4", null, "Menu 4", "Sample4.aspx");

        l_Table.Rows.Add("5", "2", "Menu 2.1", "Sample21.aspx");
        l_Table.Rows.Add("6", "2", "Menu 2.2", "Sample22.aspx");
        l_Table.Rows.Add("7", "2", "Menu 2.3", "Sample23.aspx");
        l_Table.Rows.Add("8", "2", "Menu 2.4", "Sample24.aspx");

        l_Table.Rows.Add("9", "3", "Menu 3.1", "Sample31.aspx");
        l_Table.Rows.Add("10", "3", "Menu 3.2", "Sample32.aspx");
        l_Table.Rows.Add("11", "3", "Menu 3.3", "Sample33.aspx");
        l_Table.Rows.Add("12", "3", "Menu 3.4", "Sample34.aspx");

        return l_Table;
    }


    private void LoadMenu()
    {
        /*
        RadMenu2.DataSource = GetMenuData();
        RadMenu2.DataFieldParentID = "ParentMenuID";
        RadMenu2.DataFieldID = "SysMenuID";
        RadMenu2.DataTextField = "Name";
        RadMenu2.DataNavigateUrlField = "URL";
        RadMenu2.DataBind();
        */

        RadMenu2.Items.Clear();
        DataRow[] l_Parents = GetMenuData().Select("ParentMenuID IS NULL");
        foreach (DataRow l_parentRow in l_Parents)
        {
            RadMenuItem l_menuItem = new RadMenuItem();
            l_menuItem.Text = l_parentRow["Name"].ToString();
            l_menuItem.NavigateUrl = l_parentRow["URL"].ToString();
            l_menuItem.Value = l_parentRow["SysMenuID"].ToString();

            RadMenu2.Items.Add(l_menuItem);
        }
        RadMenu2.DataBind();
    }

    class CustomTemplate : ITemplate
    {
        public void InstantiateIn(Control container)
        {
            RadSiteMap l_SiteMap = new RadSiteMap();
            l_SiteMap.Skin = "Glow";
            l_SiteMap.CssClass = "itemContent configuration";
            l_SiteMap.DefaultLevelSettings.ListLayout.RepeatColumns = 3;
            l_SiteMap.DataBinding += new EventHandler(SiteMap_DataBinding);
            container.Controls.Add(l_SiteMap);

        }

        private void SiteMap_DataBinding(object sender, EventArgs e)
        {
            RadSiteMap l_SiteMap = (RadSiteMap)sender;
            RadMenuItem item = (RadMenuItem)l_SiteMap.BindingContainer;
            string l_text = (string)DataBinder.Eval(item, "Text");
            string l_value = (string)DataBinder.Eval(item, "Value");
            string l_url = (string)DataBinder.Eval(item, "NavigateUrl");

            RadSiteMapNode l_ChildNode = new RadSiteMapNode(l_text, l_url);
            l_SiteMap.Nodes.Add(l_ChildNode);

            DataTable l_MenuTable = GetMenuData();
            DataRow[] l_Rows = l_MenuTable.Select("ParentMenuID=" + l_value);
            if (l_Rows.Length > 0)
            {
                foreach (DataRow l_Row in l_Rows)
                {
                    RadSiteMapNode l_SubNode = new RadSiteMapNode(l_Row["Name"].ToString(), l_Row["URL"].ToString());
                    l_SiteMap.Nodes.Add(l_SubNode);
                }
            }
        }
    }
}

In the sample page above, top menu was generated manually from Markup and it is working fine. The second one was generated programatically and result was terrible. And please let me know if there is anything else I can do to achieve the same result.

Thanks in advanced.
Robin

[Plamen]

Hello Robin,

I have noticed that you are adding item template dynamically while in the declarative menu you use ContentTemplate. 

One way to bind the RadSiteMap programmatically is to first add it in the mark up and then find it in the code behind as in the code below:

<telerik:RadMenu runat="server" ID="RadMenu1">
        <Items>
            <telerik:RadMenuItem Text="text1">
                <ContentTemplate>
                    <telerik:RadSiteMap ID="RadSiteMap1" runat="server" />
                </ContentTemplate>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

protected void Page_Load(object sender, EventArgs e)
  {

      RadSiteMap sm = (RadSiteMap)RadMenu1.FindItemByText("text1").ContentTemplateContainer.FindControl("RadSiteMap1");

      sm.Nodes.Add(new RadSiteMapNode("some node", "http://www.telerik.com"));

  }

Hope this information will be helpful.

Regards,
Plamen
Telerik

 

 

[Robin]

Hello Plamen, 
Thanks for the reply and this works. But I still need to load parent menus manually? My intention is to show/hide menu depends on current login users' menu permission. User may not be able to see menus including Parent Items if they don't have permission. Let me know if there is any other method to achive this. If it is not possible, I have to write some hard-code that I don't want to do.

Thanks.