Create individual colors for each mainmenu-item

Answered (Not Verified) This post has 0 verified answers and 8 replies

william.vissenaeken Posted: Sun Jan 17, 2010 @ 3:21 AM

Hello,

We use the CA-menu in our Emagic.NET CMS-system.

Is it possible to create a menu from which each mainitem has a different color? When collapsing, the color of the subitems must be equal to the mainitem-color.

Is this possible with CA? If so, can someone give me a detailed example?

This is our current applied vb-code

Imports Microsoft.VisualBasic
Imports System.Data
Imports System.Xml
Imports emagiCdotNet.Core

Namespace emagiCdotNet.Modules.emagiC_DynamicMenu

    Partial Public Class AutolandMenu_ComponentArt
        Inherits emagiCdotNet.Modules.BaseModule

#Region " Methods "

        Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        End Sub

        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            LoadWithDataSet()

            DataBind()
        End Sub

        Private Sub LoadWithXML()
            Dim _xmlDocument As New XmlDocument()
            _xmlDocument = DynamicMenuUtility.GetMenuItemsAsXML(Me.emagiCdotNet_CommunityInfo.Id, Me.emagiCdotNet_DataPartId, Me.emagiCdotNet_VersionId, Me.emagiCdotNet_NodeId, Me.emagiCdotNet_Mode)

            If Not GenUtility.IsEmpty(_xmlDocument) Then
                ' get html as string and adjust the names
                Dim _stringXML As String = _xmlDocument.InnerXml
                _stringXML = _stringXML.Replace("<menu>", "<SiteMap>")
                _stringXML = _stringXML.Replace("</menu>", "</SiteMap>")
                _stringXML = _stringXML.Replace("pageId=""", " ID=""")
                _stringXML = _stringXML.Replace("title=""", " Text=""")
                _stringXML = _stringXML.Replace("navigateUrl=""", " NavigateUrl=""")
                emagiC_DynamicMenu.LoadXml(_stringXML)
            End If
        End Sub

        Private Sub LoadWithDataSet()
            Dim _ds As New Data.DataSet
            _ds = DynamicMenuUtility.GetMenuItemsAsDataset(Me.emagiCdotNet_CommunityInfo.Id, Me.emagiCdotNet_DataPartId, Me.emagiCdotNet_VersionId, Me.emagiCdotNet_NodeId, Me.emagiCdotNet_Mode)

            If Not GenUtility.IsEmpty(_ds) Then
                BuildMenu(_ds)
            End If
        End Sub

        Private Sub BuildMenu(ByRef _ds As DataSet)
            Dim _row As DataRow

            For Each _row In _ds.Tables("MenuItems").Rows
                If (_row.IsNull("parentPageId")) Then

                    Dim _item As ComponentArt.Web.UI.MenuItem
                    _item = CreateItem(_row, 1)
                    emagiC_DynamicMenu.Items.Add(_item)
                    PopulateSubItem(_row, _item, 2)

                End If
            Next _row
        End Sub

        Private Sub PopulateSubItem(ByVal row As DataRow, ByVal item As ComponentArt.Web.UI.MenuItem, ByVal level As Integer)
            Dim _childRow As DataRow
            Dim _numberElements As Integer
            _numberElements = row.GetChildRows("ParentChildRelation").Length

            Dim _counter As Integer = 1
            For Each _childRow In row.GetChildRows("ParentChildRelation")

                Dim _childItem As ComponentArt.Web.UI.MenuItem
                _childItem = CreateItem(_childRow, level)
                item.Items.Add(_childItem)
                PopulateSubItem(_childRow, _childItem, level + 1)

                _counter += 1
            Next _childRow
        End Sub

        Private Function CreateItem(ByVal row As DataRow, ByVal level As Integer) As ComponentArt.Web.UI.MenuItem
            Dim _item As New ComponentArt.Web.UI.MenuItem()
            _item.ID = row("pageId").ToString()
            _item.Text = Server.HtmlEncode(row("title").ToString())
            _item.ToolTip = Server.HtmlEncode(row("title").ToString())
            _item.NavigateUrl = row("navigateUrl").ToString()

            Dim _look As New ComponentArt.Web.UI.ItemLook
            If level = 1 Then
                If row("nodeId").ToString() = Left(Me.emagiCdotNet_NodeId, 11) Then
                    _look.CssClass = "topLevel" & level & "active"
                Else
                    _look.CssClass = "topLevel" & level
                End If
            Else
                _look.CssClass = "topLevel" & level
            End If
            _look.HoverCssClass = "topLevel" & level & "over"
            _look.LabelPaddingLeft = CType("10", Unit)
            _look.LabelPaddingRight = CType("10", Unit)
            _look.LabelPaddingTop = CType("1", Unit)
            _look.LabelPaddingBottom = CType("1", Unit)
            _item.Look = _look

            _item.TextAlign = ComponentArt.Web.UI.TextAlign.Left

            Return _item
        End Function

#End Region

    End Class

End Namespace



Thank you in advance!
William.

All Replies

Top 10 Contributor
Posts: 1,454
Answered (Not Verified) harish Posted: Mon Jan 18, 2010 @ 10:48 AM
Suggested by harish

Hello,

 

Thank you for submitting your query with the ComponentArt forum.

 

I have gone through the description provided by you and it seems that you want to get the different look for top level items and also maintain the sub items looks according to their parent items.

 

Is it what you are looking for, please have a look on the attached sample application where the similar implementation has been made using the look id feature.

 

I hope it will help you.

 

Thank you.

Harish Malhotra

william.vissenaeken Posted: Tue Jan 19, 2010 @ 2:54 AM
Hello,

Thank you for the quick response.

I understand the lookid feature though I'm having problems integrating this. For the first Topitem it works, but all other Topitems are in same style and color as the first.

Files can be downloaded here.

I would appreciate it if you could take a look and tell me where the problem is situated.

Thank you in advance!

Sincerely,

William.
Top 10 Contributor
Posts: 1,454
harish Posted: Tue Jan 19, 2010 @ 10:11 AM

Hello,

 

Thank you for getting back to me. I tried to download the sample from the provided link but I am unable to get this link working (receiving page not found error).

 

Can you please check the link?

 

Thank you.
Harish Malhotra

william.vissenaeken Posted: Tue Jan 19, 2010 @ 11:13 AM
Hello,

Very sorry for this, this is the correct 'working' link.

Thank you in advance for your time and your effort.

Sincerely yours,

William.
Top 10 Contributor
Posts: 1,454
harish Posted: Tue Jan 19, 2010 @ 12:33 PM

Hello,

 

Thank you for providing me the updated link. I tried to run the sample application provided by you but I was unable to run it due to its external dependency (“emagiCdotNet.Core” has been used).

 

It will be appreciated if you could provide me any isolated sample having no any external dependency by which I could execute it to refer the behavior.

 

Thank you.

Harish Malhotra

william.vissenaeken Posted: Sat Jan 23, 2010 @ 1:05 AM
Hello Harish,

I've contacted the Emagic.net team to advise me based on the information (LOOKID) given by you.
They said:

"Please contact ComponentArt directly for questions related to the ComponentArt Web UI component.

If the component provides the described functionality (i.e. each item within the same level should have a different color), then you will have to loop through the dataset (DynamicMenuUtility.GetMenuItemsAsDataset) and set the item's properties depending on the nodeId of the item.
In your code example, you set the css class of an item based on the node level, so all items of the same level have the same css class."

I have asked for an example and am awaiting this.
I the meantime, if this answer helps you to understand my problem, please feel free to advise.
Sincerely,

W.

william.vissenaeken Posted: Sat Jan 23, 2010 @ 1:38 AM
Hello Harish,

You can also take a quick look at our dynamic menu on our local website http://www.blankenberge.be. This might help as well.

Thank you,

William.
Top 10 Contributor
Posts: 1,454
harish Posted: Mon Jan 25, 2010 @ 5:48 AM

Hello,

 

Thank you for getting back to me.

 

I would like to tell you that the sample application which I have provided you earlier, contains the implementation of your requirement using LookId feature. In this approach, LookId has been assigned to the top menu item and to follow the same look to its child, “DefaultSubItemLookId” attribute has been used.

 

The same implementation you can use to build the dynamic menu by setting the same properties of the item in your code behind.

 

Thank you.

 

Harish Malhotra

Page 1 of 1 (9 items)