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

RadPanelBar with Dynamically Created RadMenu issue

3 Answers 113 Views

PanelBar

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

Jacques asked on 21 Feb 2017, 06:39 AM

menu.png

panelbar.png

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Accepted

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.