RadPanelBar with Dynamically Created RadMenu issue

4 posts, 1 answers
  1. Jacques
    Jacques avatar
    17 posts
    Member since:
    Mar 2013

    Posted 21 Feb Link to this post

    Hi there,

    I have an issue with integrating a dynamic RadMenu in a RadPanelBar.
    I am able to create the RadMenu (see Menu.png)

    If I integrate the same code in the RadPanelBar the dynamic menu pops up but hovering over the individual menu items don't show the menu items added by the ItemTemplate. 

    Anybody any idea?

    Regards,

    Marcel
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form2" runat="server">
            
            <script type="text/javascript">
               function ExpandItem(panelbar, args) {
                   if (args.get_item().get_items.Count != 0 && args.get_item().get_expanded() == false) {
                       args.get_item().set_expanded(true);
                   }
                   else {
                       args.get_item().set_expanded(false);
                   }
               }
           </script>
             
            <asp:ScriptManager ID="ScriptManager1" runat="server">
           </asp:ScriptManager>
           <telerik:RadPanelBar ID="RadPanelBar1" OnClientMouseOver="ExpandItem" runat="server" Skin="Outlook" Width="190px">
               <Items>
                   <telerik:RadPanelItem runat="server" Text="Menu" Expanded="true" Selected="true">
                       <Items>
                           <telerik:RadPanelItem runat="server" Value="templateHolder">
                           </telerik:RadPanelItem>
                       </Items>
                   </telerik:RadPanelItem>
               </Items>
               <CollapseAnimation Duration="100" Type="None" />
               <ExpandAnimation Duration="100" Type="None" />
           </telerik:RadPanelBar>
        </form>
    </body>
    </html>
     
    public partial class RadPanelBarRadPanelMenu : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                RadPanelItem panelItem = (RadPanelItem)RadPanelBar1.FindItemByValue("templateHolder");
     
                // RadMenu.
                RadMenu rmMenu = new RadMenu();
                rmMenu.Width = Unit.Percentage(100);
                rmMenu.Skin = "Outlook";
                rmMenu.Flow = ItemFlow.Vertical;
                rmMenu.ItemDataBound += new RadMenuEventHandler(RmMenu_ItemDataBound);
     
                // Get categories.
                EPO.Data.Selector2.Category.GetCategories getCategories = new EPO.Data.Selector2.Category.GetCategories();
                getCategories.Main();
     
                rmMenu.DataFieldID = "Category ID";             // DataFieldID
                rmMenu.DataTextField = "Category name";         // DataTextField
                rmMenu.DataSource = getCategories.CategoryTable;
                rmMenu.DataBind();
     
                panelItem.Controls.Add(rmMenu);
     
                foreach (RadMenuItem myItems in rmMenu.GetAllItems())
                {
                    myItems.Width = Unit.Percentage(100);
                }
            }
     
            protected void RmMenu_ItemDataBound(object sender, Telerik.Web.UI.RadMenuEventArgs e)
            {
                // Get category ID.
                DataRowView categoryRow = (DataRowView)e.Item.DataItem;
                short categoryID = (short)categoryRow["Category ID"];
     
                RadMenuItem radMenuItem = (RadMenuItem)e.Item;
                RadMenuItem siteMap = new RadMenuItem();
                siteMap.ItemTemplate = new MenuTemplate(categoryID);
                radMenuItem.Items.Add(siteMap);
            }
     
            public class MenuTemplate : ITemplate
            {
                private short _categoryID;
     
                public MenuTemplate(short categoryID)
                {
                    _categoryID = categoryID;
                }
     
                public void InstantiateIn(Control container)
                {
                    RadMenuItem radMenuItem = (RadMenuItem)container;
     
                    // Create RadSiteMap.
                    RadSiteMap radSiteMap = new RadSiteMap();
                    radSiteMap.Skin = "Outlook";
                    radSiteMap.ID = "rsmRadSiteMap";
                    radSiteMap.Width = Unit.Pixel(600);
     
                    // Create Levelsettings.
                    SiteMapLevelSetting siteMapLevelSetting = new SiteMapLevelSetting(0);
                    siteMapLevelSetting.ListLayout.RepeatColumns = 3;
                    siteMapLevelSetting.ListLayout.RepeatDirection = SiteMapRepeatDirection.Vertical;
     
                    // Add Levelsettings to RadSiteMap.
                    radSiteMap.LevelSettings.Add(siteMapLevelSetting);
     
                    // Get menu by category ID.
                    EPO.Data.Selector2.SubCategory.GetMenuByCategoryID getMenuByCategoryID = new EPO.Data.Selector2.SubCategory.GetMenuByCategoryID();
                    getMenuByCategoryID.CategoryID = _categoryID;       // Category ID;      
                    getMenuByCategoryID.Main();
     
                    // Databinding.
                    radSiteMap.DataFieldParentID = "Sub category ID";   // DataFieldParentID
                    radSiteMap.DataFieldID = "Commodity code";          // DataFieldID
                    radSiteMap.DataTextField = "Name";                  // DataTextField
                    radSiteMap.DataNavigateUrlField = "Navigate URL";   // DataNavigateUrlField
                    radSiteMap.DataSource = getMenuByCategoryID.SubCategoryTable;
                    radSiteMap.DataBind();
     
                    // Add RadSiteMap to container.
                    container.Controls.Add(radSiteMap);
                }
            }
        }


  2. Answer
    Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 23 Feb Link to this post

    Hi Jacques,

    You will need to handle the overflow behavior of the menu slider manually like demonstrated in this live demo:
    http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/panelbarandmenu/defaultcs.aspx

    For example:
    body .RadPanelBar,
    body .RadPanelBar .rpSlide,
    body .RadPanelBar .rpGroup,
    body .RadPanelBar .rpItem,
    body .RadPanelBar .rpTemplate {
        overflow: visible !important;
    }


    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jacques
    Jacques avatar
    17 posts
    Member since:
    Mar 2013

    Posted 24 Feb in reply to Vessy Link to this post

    Hi Vessy,

    It is working, Thanx!!

     

    Regards,

    Marcel

  4. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 24 Feb Link to this post

    Hi,

    You are welcome, Marcel :) I am glad to know my suggestion was helpful for you.

    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top