This is a migrated thread and some comments may be shown as answers.

RadPanelBar with Dynamically Created RadMenu issue

3 Answers 67 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Jacques
Top achievements
Rank 1
Jacques asked on 21 Feb 2017, 06:39 AM
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);
            }
        }
    }


3 Answers, 1 is accepted

Sort by
0
Accepted
Vessy
Telerik team
answered on 23 Feb 2017, 07:08 PM
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.
0
Jacques
Top achievements
Rank 1
answered on 24 Feb 2017, 07:09 AM

Hi Vessy,

It is working, Thanx!!

 

Regards,

Marcel

0
Vessy
Telerik team
answered on 24 Feb 2017, 08:32 AM
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.
Tags
PanelBar
Asked by
Jacques
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Jacques
Top achievements
Rank 1
Share this question
or