[Solved] Problem styling menu

[King Wilder]

I have an admin console template and I'm trying to emulate the menu using the Telerik Menu extension but I can't quite get there.

Here's what I'm trying to achieve.  This is the original HTML template code.

<div id="main_menu">
    <ul>
        <li>
            <a href="#" class="selected"><span><span>Dashboard</span></span></a>
            <ul>
                <li><a href="#" class="selected"><span><span>Secondary Menu1</span></span></a></li>
                <li><a href="#"><span><span>Latest Orders1</span></span></a></li>
                <li><a href="#"><span><span>Quick Settings1</span></span></a></li>
                <li><a href="#"><span><span>Selected Item1</span></span></a></li>

            </ul>
        </li>
        <li>
            <a href="#"><span><span>Store Settings</span></span></a>

        </li>
        <li>
            <a href="#"><span><span>Order Management</span></span></a>

        </li>
        <li><a href="#"><span><span>UserAccounts</span></span></a></li>
        <li><a href="#"><span><span>Catalog</span></span></a></li>
        <li><a href="#"><span><span>Promotions</span></span></a></li>
        <li><a href="#"><span><span>Static Pages</span></span></a></li>
        <li><a href="#"><span><span>Item Mouseover</span></span></a></li>
        <li><a href="#"><span><span>Press</span></span></a></li>
    </ul>
</div>

I've attached a picture of what the menu is supposed to look like, and what I've been able to get it to do.

Here's how far I've gotten.

<% Html.Telerik().Menu().Name("main_menu")
        .Items(menu =>
        {
            menu.Add().Text("Dashboard").Action("Index", "Home")
                .LinkHtmlAttributes(new{ @class = "selected"})
                .Items(item =>
                    {
                        item.Add().Text("Secondary Menu1").Action("Second", "Home");
                        item.Add().Text("Settings").Action("Settings", "Home");

                    });
        }).Render(); %>

In order to get the styling working just right, I need to get the "<span><span>" and the "</span></span>" elements in wrapped around the name of the link.

I'll also need to know how to get the "Selected" attribute working based on the selection of any particular menu item.

I'm getting to think it may not be possible, but any help would be appreciated.

Thanks.

[Alex Gyoshev]

Hello King,

> In order to get the styling working just right, I need to get the "<span><span>" and the "</span></span>" elements in wrapped around the name of the link.

To do this, use Encoded(false) and place the spans in the Text property:
    item.Add().Text("<span><span>Secondary Menu1</span></span>").Action("Second", "Home").Encoded(false);

> I'll also need to know how to get the "Selected" attribute working based on the selection of any particular menu item.

    var itemBuilder = item.Add().Text("Settings").Action("Settings", "Home");
    if (/* item is selected */)
        itemBuilder.LinkHtmlAttributes(new { @class = "selected" });

Greetings,
Alex Gyoshev
the Telerik team

[King Wilder]

Alex,

Thanks for the response.  Your solution for the Encoded(false) was the answer to that part of my problem.

For the Item selected part, I'm still struggling a bit.

if (/* item is selected */)
        itemBuilder.LinkHtmlAttributes(new { @class = "selected" });

Can you give me an example for what goes inside the "if" statement?  What I need to do is be able to select the parent menu item and one or more secondary items that are selected under the parent.  I can't quite figure that out based on what you suggest.  A little more help would be appreciated.

Here's what I have so far.

<% Html.Telerik().Menu().Name("main_menu")
        .Items(menu =>
        {
            var parentItem = menu.Add().Text("<span><span>Dashboard</span></span>").Action("Index", "Home")
                .Items(item =>
                    {
                        var itemBuilder = item.Add().Text("<span><span>Secondary Menu1</span></span>").Action("Second", "Home").Encoded(false);
                        itemBuilder = item.Add().Text("<span><span>Settings</span></span>").Action("Settings", "Home").Encoded(false);

                        //if (itemBuilder ???)
                        //    itemBuilder.LinkHtmlAttributes(new{ @class = "selected"});

                    }).Encoded(false);
            parentItem = menu.Add().Text("<span><span>Portals</span></span>").Action("Index", "Portal", new { area = "Dashboard" })
                .Items(item =>
                    {
                        var itemBuilder = item.Add().Text("<span><span>Assign Portal</span></span>").Action("AssignPortal", "Portal").Encoded(false);
                        itemBuilder = item.Add().Text("<span><span>Assign Story</span></span>").Action("AssignStory", "Portal").Encoded(false);
                    }).Encoded(false);

            if (parentItem.ViewContext.RouteData.Values["controller"].ToString() == parentItem.How_Do_I_Get_The_Selected_Menu_Item?)
                parentItem.LinkHtmlAttributes(new { @class = "selected" });

        }).Render(); %>

Thanks.

[Alex Gyoshev]

Hello King Wilder,

I'm attaching a sample solution that illustrates the described approach (changed a bit, so that it is more verbose). The same idea should apply to your site by tuning the lambda expression addMenuItem in Site.Master.

Greetings,
Alex Gyoshev
the Telerik team

[King Wilder]

Alex,

Thanks for the sample solution.  I think it's something I can work with.  I'll let you know if I have any questions.

Thanks,

King Wilder

[King Wilder]

Just one more question about this, is this the only way to have a menu item display as selected?  Is there no built-in method that automatically does this?

Thanks,

King Wilder

[Alex Gyoshev]

Hello King,

Since the menu does not support selection, this is the only way. You could, however, add an extension method to the MenuItemBuilder that does this, for your convenience.

Regards,
Alex Gyoshev
the Telerik team

[King Wilder]

Alex,

Understood. 

Thanks.