Menu with a mix of bound of static elements

8 posts, 1 answers
  1. Bartosz
    Bartosz avatar
    3 posts
    Member since:
    Jul 2011

    Posted 05 Dec 2011 Link to this post

    Hi,

    I am trying to implement a following scenario. I am porting an already existing menu solution to radMenu. The menu consists of a a couple of static elements (for example "Forums", "Clients", "Client Cards", "Reports", "Claims") and each of them consists of 2-3 nested static elements (usually registry of records and "add a new record"). The difficult part is the list of dynamically bound 10 recently opened records that is being loaded from a Stored Procedure via the SqlDataSource.

    The original menu was done pretty crudely. A panel with a HoverMenuExtender and the 10 recent list was implemented with RadioButtonList that was hooked to the SqlDataSource. Below is some code for reference:   

    <asp:HoverMenuExtender ID="HME" runat="server" PopupControlID="panelClientCardsDropDown" TargetControlID="lnkClientCardsDropDown"></asp:HoverMenuExtender>
     
        <asp:Panel ID="panelClientCardsDropDown" runat="server">
            <asp:Label ID="lblRecentCards" runat="server" Text="10 recent client cards :"/>
            <asp:SqlDataSource ID="SQLDS_RecentCards" runat="server" ConnectionString="<%$ ConnectionStrings:SQLusrConn %>" SelectCommand="spSelectRecent" SelectCommandType="StoredProcedure">
                <SelectParameters>
                    <asp:Parameter DefaultValue='<%$ AppSettings:03 %>' Name="txtParametr03" Type="String" />
                </SelectParameters>
            </asp:SqlDataSource>
            <asp:RadioButtonList ID="radRecentCards" runat="server" DataSourceID="SQLDS_RecentCards" DataTextField="Value" DataValueField="ID">
            </asp:RadioButtonList>
        <asp:HyperLink ID="lnkNewCard" NavigateUrl="~/private/tcard.aspx?ID=new" Target="_blank" runat="server" Text="New Client Card"/>
        </asp:Panel>

    I would like to know how to achieve this using the radMenu. I've read the documentation but it does not seem to provide a solution.
  2. Answer
    Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 05 Dec 2011 Link to this post

    Hello Bertosz,

    You can have a static RadMenu with the items declared like you already have and then load the dynamic items in the code-behind. Like so:

    ASPX:
    <telerik:RadMenu ID="RadMenu1" runat="server">
            <Items>
                <telerik:RadMenuItem Text="Forums">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Clients">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Client Cards">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Reports">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Claims">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Recent Records" Value="RecentRecords">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

    Code-Behind:
    SqlConnection con = new SqlConnection("[Connection String]");
      
            using (con)
            {
                SqlCommand cmd = con.CreateCommand();
                cmd.CommandText = "[Stored Procedure Name]";
                cmd.CommandType = System.Data.CommandType.StoredProcedure;
      
                SqlDataReader r = cmd.ExecuteReader();
      
                while (r.Read())
                {
                    RadMenuItem newItem = new RadMenuItem();
                    // get value in column 1
                    newItem.Text = r.GetString(0);
      
                    RadMenu1.FindItemByValue("RecentRecords").Items.Add(newItem);
                }
            }

    So I setup my RadMenu with static elements and then in the code-behind of the page I add the dynamic elements from the stored procedure to the Recent Records menu item.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 Dec 2011 Link to this post

    Hello Bartosz,

    You can also refer to our on-line demos and documentation where you can find more information and examples considering the different ways of binding the menu to various data sources:

    http://demos.telerik.com/aspnet-ajax/menu/examples/programming/declarativedatasources/defaultcs.aspx
    http://www.telerik.com/help/aspnet-ajax/menu-data-binding-overview.html

    Kind regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. David
    David  avatar
    3 posts
    Member since:
    Nov 2011

    Posted 06 Dec 2011 Link to this post

    is there a hands on example file or video about radmenu template?
    i am trying to  accomplish navigation menu style similar to this site?
    http://hometownbankhv.com/

    telerik visual style builder only provides like office style menu bar.


  6. Bartosz
    Bartosz avatar
    3 posts
    Member since:
    Jul 2011

    Posted 07 Dec 2011 Link to this post

    Thank you for your answers.
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 Dec 2011 Link to this post

    Hi David,

    Here I have attached a very similar example demonstrating how you can customize the RadMenu control. Furthermore you can take a look at our on-line demo of the MegaDropdownMenu here.

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  8. David
    David  avatar
    3 posts
    Member since:
    Nov 2011

    Posted 07 Dec 2011 Link to this post

    is this radsitemap embedded inside radmenu from this demo site and sample project?
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 12 Dec 2011 Link to this post

    Hi David ,

    The attached example as well as the on-line demo are highly customized examples of how you can alter the menu appearance. We used the RadSitemap control in order to facilitate the column rendering in the dropdown. However, you can further customize it by removing the sitemap control and replacing it with simple MenuItems.

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017