1. Home
  2. Forum
  3. Blazor
  4. Menu Bar is always expanded

Menu Bar is always expanded

Hi,

I am looking to build a Menu Bar following the use case described in the example with self-referential-data


My Menu Bar is built but it is always in a expanded mode. Not sure if I am missing anything.

<SfMenu Items="@nav.NavigationMenuItems" EnableScrolling="true" CssClass="nav flex-column"
Fields="@nav.MenuFields" Orientation="Syncfusion.Blazor.Navigations.Orientation.Vertical">
<MenuAnimationSettings Effect = "MenuEffect.FadeIn" Duration = "400"></MenuAnimationSettings>
</SfMenu>



_navigationItems = new List<NavigationItems>();

foreach (var item in nav)
{
// List<NavigationItems> states = new List<NavigationItems>();

_navigationItems.Add(new NavigationItems()
{

Name = item.name,
Id = item.code,
IsCountry = true,
ParentId = null,
// ChildItems = new List<NavigationItems>()

});

Console.WriteLine("navigation items child items");


var currentListItem =_navigationItems.LastOrDefault();
//currentListItem.ChildItems = new List<NavigationItems>();

foreach (var item1 in item.states)
{

_navigationItems.Add(new NavigationItems(){

Name = item1.name,
Id = item1.code,
IsState = true,
ParentId = item.code,
//ChildItems = new List<NavigationItems>()

});

// states.Add(state);

Console.WriteLine(currentListItem.ChildItems);

foreach (var item2 in item1.districts)
{
//List<NavigationItems> cities = new List<NavigationItems>();
_navigationItems.Add(new NavigationItems(){

Name = item2.name,
Id = item2.code,
IsDistrict = true,
ParentId = item1.code

});

foreach (var item3 in item2.city)
{
_navigationItems.Add(new NavigationItems(){

Name = item3.name,
Id = item3.code,
IsCity = true,
ParentId = item2.code


});

}
}
}
}
sceenshot

3 Replies
SD Saranya Dhayalan Syncfusion Team April 27, 2020 11:28 AM UTC

 
Hi Vijay, 
 
Thank you for contacting Syncfusion support 
 
We have checked your reported issue we are notable to reproduce it in our end in 18.1.0.54 version. Please find the below code snippet: 
 
@using Syncfusion.Blazor.Navigations 
 
    <SfMenu Items="@MenuItems" EnableScrolling="true" CssClass="nav flex-column" 
            Orientation="Syncfusion.Blazor.Navigations.Orientation.Vertical"> 
        <MenuAnimationSettings Effect="MenuEffect.FadeIn" Duration="400"></MenuAnimationSettings> 
    </SfMenu> 
 
@code{ 
    public List<MenuItem> MenuItems = new List<MenuItem>{ 
        new MenuItem{ Text = "File", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Open" }, 
            new MenuItem{ Text= "Save" }, 
            new MenuItem{ Text= "Exit" }} 
    }, 
        new MenuItem{ Text = "Edit", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Cut" }, 
            new MenuItem{ Text= "Copy" }, 
            new MenuItem{ Text= "Paste" }} 
    }, 
        new MenuItem{ Text = "View", Items = new List<MenuItem>{ 
            new MenuItem{ Text = "Toolbars" }, 
            new MenuItem{ Text = "Zoom" }, 
            new MenuItem{ Text = "Full Screen" }} 
    }, 
        new MenuItem{ Text = "Tools", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Spelling & Grammar" }, 
            new MenuItem{ Text= "Customize" }, 
            new MenuItem{ Text= "Options" }} 
    }, 
        new MenuItem{ Text = "Go" }, 
        new MenuItem{ Text = "Help" } 
    }; 
} 
 
For your convenience we have prepared a sample. Please find the below sample link 
 
 
Before that, we would like to let you know the following details: 
 
1.       Please provide any other customization done in the sample level. 
2.       If possible, please reproduce your issue in the above sample. 
3.       Please share us the video demonstration of this issue.  
 
If we misunderstood your requirement, please provide the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Saranya D 


VA Vijay Aravind April 29, 2020 12:59 AM UTC

Thank you Saranya, I will try and let you know. There is no other customization. The only difference between this code and the one I am using is the Service that is pulling the data and binding it.

Also, I tried to get the object on selected but I am only getting MenuItemModel object as opposed the original object of MenuItem. I looking to get that so I can maintain the state. Is there a way to get the original object? I am getting null for args.text or Url

{
Console.WriteLine("Item Selected");
Console.WriteLine(args.Item);
Console.WriteLine(args.Item.Url);
Console.WriteLine(args.Item.Text);
MenuItemModel mil = args.Item;
Console.WriteLine(mil.Url);
Console.WriteLine(mil.Id);
Console.WriteLine(mil.Text);
}

SD Saranya Dhayalan Syncfusion Team April 30, 2020 01:13 PM UTC

Hi Vijay, 
 
Most welcome. 
 
We have checked your query, Before that, we would like to let you know the following details 
 
1.       Please provide whether you want to set an item in selected event. 
2.       Please provide the exact use case scenario. 
 
Could you please provide the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Saranya D 


Loader.
Up arrow icon