Portal Engine Questions on portal engine and web parts.
Version 4.x > Portal Engine > P7 navigation menu View modes: 
User avatar
Member
Member
john-squareroot-inc - 10/16/2009 12:56:18 PM
   
P7 navigation menu
I need to create a menu without tables, but add attributes 'id="navX" dynamically. How can I accomplish this in Kentico?

This is the output I need:

<ul id="p7PMnav">
<li><a href="#" id="nav1">level one</a>
<ul>
<li><a href="#">Link Text</a></li>
<li><a href="#">Link Text</a></li>
<li><a href="#">Link Text</a></li>
</ul>
</li>
<li><a href="#" id="nav2">level two</a>
<ul>
<li><a href="#">Link Text</a></li>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.3</a></li>
</ul>
</li>
<li><a href="#" id="nav3">level three</a>
<ul>
<li><a href="#">Link Text</a></li>
<li><a href="#">Link Text</a></li>
</ul>
</li>
<!--[if lte IE 6]><style>#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]-->
<!--[if IE 6]><style>#p7PMnav ul li{clear:none;}</style><![endif]-->
<!--[if IE 7]><style>#p7PMnav a{zoom:100%;}#p7PMnav ul li{float:left;clear:both;width:100%;}</style><![endif]-->
</ul>

User avatar
Kentico Developer
Kentico Developer
kentico_zbysekn - 10/19/2009 8:20:49 AM
   
RE:P7 navigation menu
Hi John,
Well you can use our CSS list menu, which has very similar structure. If you need any customization, you can create copy of this webpart and adjust its menuelement RenderedHTML property, which contains rendered HTML text of the control. So you can parse it and adjust it to fit your needs.

Another approach is to create your own webpart using repeater(possibly also some nested repeater) which will render the content according to specified transformation.

Best Regards,
Zbysek Nemec.

User avatar
Member
Member
john-squareroot-inc - 10/19/2009 2:59:12 PM
   
RE:P7 navigation menu
Hello Zbysek,

I cannot find the RenderedHTML property in ~/CMSWebParts/Navigation/cmslistmenu.ascx.cs, is this the correct webpart?

User avatar
Member
Member
john-squareroot-inc - 10/20/2009 1:14:39 PM
   
RE:P7 navigation menu
Hello again,

I took the repeater approach and I have arrived at another problem. I am 95% of the way there.

<li><a href="<%# GetDocumentUrl() %>" id="nav<%# DataItemIndex %>" class="p7PMtrg"><%# Eval("DocumentName") %></a>
<%# Eval("NodeAliasPath") %>
<ul><cc1:CMSRepeater ID="repeaterTest" runat="server" Path="<%# Eval("NodeAliasPath") %>/%" ClassNames="cms.menuitem" TransformationName="CMS.MenuItem.ImageGalleryList"
></cc1:CMSRepeater></ul>
</li>


I am unable to place '<%# Eval("NodeAliasPath") %>/%' within the server tag for the internal repeater. How can I pass this dynamic value into the path attribute for the inner repeater?

User avatar
Kentico Developer
Kentico Developer
kentico_zbysekn - 10/20/2009 3:43:30 PM
   
RE:P7 navigation menu
Hi John,
could you please try to set delayedloading property of nested repeater to true? It should solve this issue.
Best Regards,
Zbysek Nemec

User avatar
Member
Member
john-squareroot-inc - 10/20/2009 3:59:05 PM
   
RE:P7 navigation menu
Zbysek,

I added delayedloading property to the inner repeater, however, I receive and error "The server tag was not well formed." This is because of the path attribute of inner repeater.
Path="<%# Eval("NodeAliasPath") %>/%"


Changing this to /{0}/% yeilds the same result set for every menu. I need a way to pass in a dynamic Path.

Thank you for your help

User avatar
Kentico Developer
Kentico Developer
kentico_zbysekn - 11/3/2009 4:15:18 PM
   
RE:P7 navigation menu
Hi John,
as error said tag wasn't formed well. You have used quotation marks badly. You should try to use this part of the code for path property definition instead:
path='<%# Eval("NodeAliasPath")%> +  "/%" '

Best Regards,
Zbysek Nemec.

User avatar
Kentico Developer
Kentico Developer
kentico_zbysekn - 10/20/2009 3:41:49 PM
   
RE:P7 navigation menu
Hi John,
as I mentioned in my previous post it's property of included menuelement control. So you should find it under this control. Yes the URL to webpart is correct.
Best Regards,
Zbysek Nemec

User avatar
Member
Member
john-squareroot-inc - 10/21/2009 11:23:51 AM
   
RE:P7 navigation menu
It doesn't appear that the RenderedHTML property exists in the 4.1 cmslistmenu.ascx.cs file anymore. These are the properties:

#region "Public properties"

/// <summary>
/// Gets or sets the css prefix. For particular levels can be used several values separated with semicolon (;)
/// </summary>
public string CSSPrefix
{
get
{
return DataHelper.GetNotEmpty(ValidationHelper.GetString(this.GetValue("CSSPrefix"), this.menuElem.CSSPrefix), this.menuElem.CSSPrefix);
}
set
{
this.SetValue("CSSPrefix", value);
this.menuElem.CSSPrefix = value;
}
}


/// <summary>
/// Gets or sets the value that indicate whether all items in path will be highlighted
/// </summary>
public bool HighlightAllItemsInPath
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("HighlightAllItemsInPath"), this.menuElem.HighlightAllItemsInPath);
}
set
{
this.SetValue("HighlightAllItemsInPath", value);
this.menuElem.HighlightAllItemsInPath = value;
}
}


/// <summary>
/// Gets or sets the nodes path which indicates path, where items in this path are highligted (at default current alias path)
/// </summary>
public string HighlightedNodePath
{
get
{
return DataHelper.GetNotEmpty(ValidationHelper.GetString(this.GetValue("HighlightedNodePath"), this.menuElem.HighlightedNodePath), this.menuElem.HighlightedNodePath);
}
set
{
this.SetValue("HighlightedNodePath", value);
this.menuElem.HighlightedNodePath = value;
}
}


/// <summary>
/// Gets or sets the value that indicates whether alternating styles are used
/// </summary>
public bool UseAlternatingStyles
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("UseAlternatingStyles"), this.menuElem.UseAlternatingStyles);
}
set
{
this.SetValue("UseAlternatingStyles", value);
this.menuElem.UseAlternatingStyles = value;
}
}


/// <summary>
/// Gets or sets the value that indicates whether highlighted item is displayed as link
/// </summary>
public bool DisplayHighlightedItemAsLink
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("DisplayHighlightedItemAsLink"), this.menuElem.DisplayHighlightedItemAsLink);
}
set
{
this.SetValue("DisplayHighlightedItemAsLink", value);
this.menuElem.DisplayHighlightedItemAsLink = value;
}
}


/// <summary>
/// Gets or sets the value that indicates whether only submenu under highlighted item could be render, otherwise all submenus are rendered
/// </summary>
public bool DisplayOnlySelectedPath
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("DisplayOnlySelectedPath"), this.menuElem.DisplayOnlySelectedPath);
}
set
{
this.SetValue("DisplayOnlySelectedPath", value);
this.menuElem.DisplayOnlySelectedPath = value;
}
}


/// <summary>
/// Gets or sets the first item CSS class
/// </summary>
public string FirstItemCssClass
{
get
{
return DataHelper.GetNotEmpty(ValidationHelper.GetString(this.GetValue("FirstItemCssClass"), this.menuElem.FirstItemCssClass), this.menuElem.FirstItemCssClass);
}
set
{
this.SetValue("FirstItemCssClass", value);
this.menuElem.FirstItemCssClass = value;
}
}


/// <summary>
/// Gets or sets last item CSS class
/// </summary>
public string LastItemCssClass
{
get
{
return DataHelper.GetNotEmpty(ValidationHelper.GetString(this.GetValue("LastItemCssClass"), this.menuElem.LastItemCssClass), this.menuElem.LastItemCssClass);
}
set
{
this.SetValue("LastItemCssClass", value);
this.menuElem.LastItemCssClass = value;
}
}


/// <summary>
/// Gets or sets onmouseout script
/// </summary>
public string OnMouseOutScript
{
get
{
return DataHelper.GetNotEmpty(ValidationHelper.GetString(this.GetValue("OnMouseOutScript"), this.menuElem.OnMouseOutScript), this.menuElem.OnMouseOutScript);
}
set
{
this.SetValue("OnMouseOutScript", value);
this.menuElem.OnMouseOutScript = value;
}
}


/// <summary>
/// Gets or sets onmouseover script
/// </summary>
public string OnMouseOverScript
{
get
{
return DataHelper.GetNotEmpty(ValidationHelper.GetString(this.GetValue("OnMouseOverScript"), this.menuElem.OnMouseOverScript), this.menuElem.OnMouseOverScript);
}
set
{
this.SetValue("OnMouseOverScript", value);
this.menuElem.OnMouseOverScript = value;
}
}


/// <summary>
/// Gets or sets the value that indicates whether CSS classes will be rendered
/// </summary>
public bool RenderCssClasses
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("RenderCssClasses"), this.menuElem.RenderCssClasses);
}
set
{
this.SetValue("RenderCssClasses", value);
this.menuElem.RenderCssClasses = value;
}
}


/// <summary>
/// Gets or sets the value that indicates whether item ID will be rendered
/// </summary>
public bool RenderItemID
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("RenderItemID"), this.menuElem.RenderItemID);
}
set
{
this.SetValue("RenderItemID", value);
this.menuElem.RenderItemID = value;
}
}


/// <summary>
/// Gets or sets the url to the image which is assigned as sub menu indicator
/// </summary>
public string SubMenuIndicator
{
get
{
return DataHelper.GetNotEmpty(ValidationHelper.GetString(this.GetValue("SubmenuIndicator"), this.menuElem.SubmenuIndicator), this.menuElem.SubmenuIndicator);
}
set
{
this.SetValue("SubmenuIndicator", value);
this.menuElem.SubmenuIndicator = value;
}
}


/// <summary>
/// Gets or sets the link url target
/// </summary>
public string UrlTarget
{
get
{
return DataHelper.GetNotEmpty(ValidationHelper.GetString(this.GetValue("UrlTarget"), this.menuElem.UrlTarget), this.menuElem.UrlTarget);
}
set
{
this.SetValue("UrlTarget", value);
this.menuElem.UrlTarget = value;
}
}


/// <summary>
/// Gets or sets the css class name, which create envelope around menu and automatically register LIHover.htc script (IE6 required this)
/// </summary>
public string HoverCssClassName
{
get
{
return DataHelper.GetNotEmpty(this.GetValue("HoverCSSClassName"), this.menuElem.HoverCSSClassName);
}
set
{
this.SetValue("HoverCSSClassName", value);
this.menuElem.HoverCSSClassName = value;
}
}


/// <summary>
/// Gets or sets the item ID prefix
/// </summary>
public string ItemIDPrefix
{
get
{
return ValidationHelper.GetString(this.GetValue("ItemIdPrefix"), this.menuElem.ItemIdPrefix);
}
set
{
this.SetValue("ItemIdPrefix", value);
this.menuElem.ItemIdPrefix = value;
}
}


/// <summary>
/// Gets or sets the value that indicates whether alternate text for image will be rendered
/// </summary>
public bool RenderImageAlt
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("RenderImageAlt"), this.menuElem.RenderImageAlt);
}
set
{
this.SetValue("RenderImageAlt", value);
this.menuElem.RenderImageAlt = value;
}
}


/// <summary>
/// Gets or sets the value that indicates whether link title will be rendered
/// </summary>
public bool RenderLinkTitle
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("RenderLinkTitle"), this.menuElem.RenderLinkTitle);
}
set
{
this.SetValue("RenderLinkTitle", value);
this.menuElem.RenderLinkTitle = value;
}
}


/// <summary>
/// Gets or sets the value that indicates whether control should be hidden if no data found
/// </summary>
public bool HideControlForZeroRows
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("HideControlForZeroRows"), this.menuElem.HideControlForZeroRows);
}
set
{
this.SetValue("HideControlForZeroRows", value);
menuElem.HideControlForZeroRows = value;
}
}


/// <summary>
/// Gets or sets the text which is displayed for zero rows results
/// </summary>
public string ZeroRowsText
{
get
{
return ValidationHelper.GetString(this.GetValue("ZeroRowsText"), this.menuElem.ZeroRowsText);
}
set
{
this.SetValue("ZeroRowsText", value);
this.menuElem.ZeroRowsText = value;
}
}


/// <summary>
/// Filter name.
/// </summary>
public string FilterName
{
get
{
return ValidationHelper.GetString(this.GetValue("FilterName"), this.menuElem.FilterName);
}
set
{
this.SetValue("FilterName", value);
this.menuElem.FilterName = value;
}
}


/// <summary>
/// Gets or sets property which indicates if menu caption should be HTML encoded.
/// </summary>
public bool EncodeMenuCaption
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("EncodeMenuCaption"), this.menuElem.EncodeMenuCaption);
}
set
{
this.SetValue("EncodeMenuCaption", value);
this.menuElem.EncodeMenuCaption = value;
}
}

#endregion


User avatar
Kentico Developer
Kentico Developer
kentico_martind - 10/22/2009 4:05:31 AM
   
RE:P7 navigation menu
Hi John,

Please note it's property of the control, not the web part. Could you please use following sample code to reference it e.g. in OnContentLoaded method:

this.menuElem.RenderedHTML

Best Regards,

Martin Dobsicek