Formatting data bound menu

2 Answers 33 Views

Chris asked on 18 Dec 2024, 12:15 PM

I have a data bound menu component where I would like to override the styles of individual items - namely at the moment I would like to make some bold.

What I actually want to do is to render a separator, then a bold header, and then a normal weight list of options - something like :

-----------------------------
Recent Customers
Customer 1
Customer 2
Customer 3
-----------------------------

I do not want them to be a sub menu ideally. I am struggling to work out how to set the class/style of individual menu items.

This is my code for rendering the menu currently, I will add another property to item/subitem as a flag to denote requiring to be bold :

            @(
            Html.Kendo().Menu()
            .Name("mainMenu")                
            .BindTo(Model.Menus.Where(s => s.ParentMenuId == 0), mappings =>
            {
                mappings.For<Welcomm_CRM.Core.Application.Menu>(binding => binding // Define the first level of the Menu.
                .ItemDataBound((item, type) => // Define the mapping between the Menu item properties and the model properties.
                {
                    item.Text = type.MenuTitle;   
                    if (type.MenuSource == 999999)
                    {
                        item.LinkHtmlAttributes.Add(type.ControllerName, type.ActionName);
                    }
                    else if (type.MenuSource == 999998)
                    {
                        item.Separator = true;
                    }
                    else if (type.MenuSource == 0)
                    {
                        item.Url = @Html.Encode(type.Url);
                    }
                }
                )
                .Children(type => Model.Menus.Where(s => s.ParentMenuId == type.MenuId)));
                mappings.For<Welcomm_CRM.Core.Application.Menu>(binding => binding
                .ItemDataBound((item, subtype) =>
                {
                    item.Text = subtype.MenuTitle;                        
                    if (subtype.MenuSource == 999999)
                    {
                        item.LinkHtmlAttributes.Add(subtype.ControllerName, subtype.ActionName);
                    }
                    else if (subtype.MenuSource == 999998)
                    {
                        item.Separator = true;
                    }
                    else
                    {
                        item.Url = @Html.Encode(subtype.Url);
                    }
                })
                );
            })
            )