1. Home
  2. Forum
  3. Blazor
  4. Menu not displaying hierarchy properly

Menu not displaying hierarchy properly

I am currently going through the trial and trying to get some stuff setup for a proof of concept, but having issues with the menu not displaying properly.

I have the following class in code:

    public partial class ClientPortalPage {

        public ClientPortalPage()
        {
            this.SortOrder = 1;
            OnCreated();
        }

        public virtual int ClientPortalPageId
        {
            get;
            set;
        }

        public virtual int? ClientPortalId
        {
            get;
            set;
        }

        public virtual int? ParentId
        {
            get;
            set;
        }

        public virtual int SortOrder
        {
            get;
            set;
        }

        public virtual bool Disabled
        {
            get;
            set;
        }

        public virtual string PageName
        {
            get;
            set;
        }

        public virtual string Title
        {
            get;
            set;
        }

        public virtual string Url
        {
            get;
            set;
        }

        public virtual string ImagePath
        {
            get;
            set;
        }

        public virtual ClientPortal ClientPortal
        {
            get;
            set;
        }

        #region Extensibility Method Definitions

        partial void OnCreated();

        #endregion
    }

My menu code inside the razor page looks like this:

                        <SfMenu Items="@MenuItems" Fields="@MenuFields">
                            <MenuEvents ItemSelected="MenuSelectCallback"></MenuEvents>
                        </SfMenu>

Then I have this property to map the fields for the menu:

        public MenuFieldSettings MenuFields = new MenuFieldSettings
        {
            ItemId = "ClientPortalPageId",
            Text = "Title",
            ParentId = "ParentId",
            Url = "Url"
        };

However, when I run, the menu is not being setup properly with the submenu's.   All of the menu items, currently 10 of them, all show as top level menu items.   Not sure what I am doing wrong or what I am missing, but is there anything that stands out as not being properly setup?

Thanks!

Chico

2 Replies
SD Saranya Dhayalan Syncfusion Team April 30, 2020 01:14 PM UTC

Hi Chico, 
 
Thank you for contacting Syncfusion support 
 
We have checked your reported query, you can achieve this to provide string type for parentId and ClientPortalPageId. Please find the below code snippet: 
 
@using Syncfusion.Blazor.Navigations 
 
<SfMenu Items="@MenuItems" Fields="@MenuFields"></SfMenu> 
 
@code { 
    public List<ClientPortalPage> MenuItems = new List<ClientPortalPage> 
    { 
        new ClientPortalPage{ ClientPortalPageId = "1", Title = "Events", Url="www.google.com" }, 
        new ClientPortalPage{ ClientPortalPageId = "2", Title = "Movies" }, 
        new ClientPortalPage{ ClientPortalPageId = "3", Title = "Directory" }, 
        new ClientPortalPage{ ClientPortalPageId = "4", Title = "Queries", ParentId = "1"  }, 
        new ClientPortalPage{ ClientPortalPageId = "5", Title = "Services", ParentId = "1" }, 
        new ClientPortalPage{ ClientPortalPageId = "6", Title = "Conferences", ParentId = "1" }, 
        new ClientPortalPage{ ClientPortalPageId = "7", Title = "Music", ParentId = "1" }, 
        new ClientPortalPage{ ClientPortalPageId = "8", Title = "Workshops", ParentId = "1" }, 
 
        new ClientPortalPage{ ClientPortalPageId = "9", Title = "Now Showing", ParentId = "2" }, 
        new ClientPortalPage{ ClientPortalPageId = "10", Title = "Coming Soon", ParentId = "2" }, 
 
        }; 
 
  
 
    public MenuFieldSettings MenuFields = new MenuFieldSettings 
    { 
        ItemId = "ClientPortalPageId", 
        Text = "Title", 
        ParentId = "ParentId", 
        Url = "Url" 
    }; 
 
  
    public partial class ClientPortalPage { 
 
        public ClientPortalPage() 
        { 
            this.SortOrder = 1; 
            OnCreated(); 
        } 
 
        public virtual string ClientPortalPageId 
        { 
            get; 
            set; 
        } 
 
        public virtual int? ClientPortalId 
        { 
            get; 
            set; 
        } 
 
        public virtual string ParentId 
        { 
            get; 
            set; 
        } 
 
        public virtual int SortOrder 
        { 
            get; 
            set; 
        } 
 
        public virtual bool Disabled 
        { 
            get; 
            set; 
        } 
 
        public virtual string PageName 
        { 
            get; 
            set; 
        } 
 
        public virtual string Title 
        { 
            get; 
            set; 
        } 
 
        public virtual string Url 
        { 
            get; 
            set; 
        } 
 
        public virtual string ImagePath 
        { 
            get; 
            set; 
        } 
 
        
       #region Extensibility Method Definitions 
 
        partial void OnCreated(); 
 
        #endregion 
    } 
} 
 
Please check the above code snippet and get back to us if you need further assistance on this. 
 
Regards, 
Saranya D 


CM Chico Marvici April 30, 2020 02:26 PM UTC

So it seems that both ClientPortalPageId AND ParentId both needed to be in the string format for it to work properly.

That seems like an issue that should be resolved on the component side.   If both of the types of the ItemId property and the ParentId property are Int32, then it should be able to reconcile both.    In most cases, the hierarchical data, when pulled from a database is going to be referenced as integers and not strings.

However, it is working now and the menu is displaying properly.



Loader.
Up arrow icon