Dynamically load multi column menu

[Tim]

Hi I need to create a multicolumn menu similar in design to the demo(https://www.telerik.com/demos/aspnet/prometheus/Menu/Examples/MultiColumnMenu/DefaultCS.aspx)

I need to populate the values dynamically though. I have been playing with it for awhile now and really came up with what seems like a hack. It almost works, I still have a lot to clean up and figure out. Before I waste a lot of time doing that… This is what I did so far. I have to create a class based on itemplate then build the template and add it to the radmenu control collection. Is this the right way to do it? Do you have examples of how to create the multi column menu dynamically (from a database). I couldn’t find anything.

This is what I have..

HTML:

<telerik:RadMenu ID="MainMenu" runat="server" Skin="Web20" CssClass="qsfexMenu">

<Items>

<telerik:RadMenuItem Text="TopMenuItem">

<Items>

<telerik:RadMenuItem CssClass="ProductsSection">

<ItemTemplate>

<div class="qsfexCustomMenuSection">

<a class="alink" style="color:Blue;" href="" id="SubMenuItemCol1" runat="server" >ddd</a>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

 

Code:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

     If Not Page.IsPostBack Then

           SetupMenu()

      End If

End Sub

 

Sub SetupMenu()

 ' get menu items

Dim items As MenuItems = New MenuItems("989", "/M/C/MainMenu.ascx", DateTime.Today, "154")

For Each mItem As MenuItem In items

Dim item As RadMenuItem

      item = New RadMenuItem

      item.Text = mItem.MenuText

      item.NavigateUrl = mItem.MenuUrl

      If mItem.HasSubMenus Then

            LoadChildMenus(item, mItem)

      End If

      MainMenu.Items.Add(item)

Next

End Sub

Sub LoadChildMenus(ByVal item As RadMenuItem, ByVal mItem As MenuItem)

 If Not item Is Nothing Then

   For Each m As MenuItem In mItem.SubMenuItems

           Dim mct As MultiColumnTemplate = New MultiColumnTemplate()

            mct.text = m.MenuText

            mct.url = m.MenuUrl

            Dim x As RadMenuItem = New RadMenuItem(m.MenuText, m.MenuUrl)

            x.ItemTemplate = mct

            x.CssClass = "ProductsSection"

            item.Items.Add(x)

      Next

      End If

End Sub

Class MultiColumnTemplate

      Implements ITemplate

      Public text As String

      Public url As String

      Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn

      Dim menuText As String = text

      Dim menuUrl As String = url

      Dim a As HtmlAnchor = New HtmlAnchor()

      a.InnerHtml = menuText

      a.HRef = menuUrl

      container.Controls.Add(a)

End Sub

End Class

Thanks for your help. 

[Tim]

Actually my design is really bad, I'll have so much html in my code. Yuck! Also I'm not sure how to create the next column. Just seems that there would be a nice clean way to access the controls within the menu. Like using find control. Basiclly I need to make the menu display similar to this:

TopMenuOne | TopMenuTwo | TopMenuThree
    SubMenu1    SubMenu7      SubMenu13
    SubMenu2    SubMenu8      SubMenu14
    SubMenu3    SubMenu9
    SubMenu4    SubMenu10
    SubMenu5    SubMenu11
    SubMenu6    SubMenu12
 
So with TopMenuOne selected all of those "SubMenu" items will display.

Thanks

[Tim]

Anyone have anything for this, really stuck on this one.

[Peter]

Hello Tim,

The easiest way to dynamically add template controls is by using the RadMenuItem's Controls.Add(control) method. Here is a simple example which shows how to add a panel with links read from a data table to the first child of the first root item:

Private Function CreateTestTable() As DataTable
    Dim table As New DataTable()

    table.Columns.Add("Text")
    table.Columns.Add("URL")

    table.Rows.Add(New String() {"Link 1", "link1.aspx"})
    table.Rows.Add(New String() {"Link 2", "link2.aspx"})
    table.Rows.Add(New String() {"Link 3", "link3.aspx"})

    Return table
End Function

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    RadMenu1.Items(0).Items(0).Controls.Add(CreateMenuTemplate(CreateTestTable()))
End Sub
Private Function CreateMenuTemplate(ByVal DataTable1 As DataTable) As Panel
    Dim panel1 As New Panel()
    For Each row1 As DataRow In DataTable1.Rows
        Dim link As New HyperLink()
        link.Text = DirectCast(row1("Text"), String)
        link.NavigateUrl = DirectCast(row1("URL"), String)
        panel1.Controls.Add(link)
    Next

    Return panel1
End Function

I hope this helps, but if you have any questions, please feel free to contact us.



Regards,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Anthony]

I'm trying to do something similar here, but my root menu items are dynamically bound. I am having dificulty in what approach to take.

I'd appreciate any help / code sample on this.

Thanks
Anthony