Expand only one submenu at a time

Hi all,
I'm trying to achieve is an exclusive submenu expansion in the sidebar, meaning that only one panel menu at a time can be expanded.

Is it possible or still not available?

Regards

There is no property that enables single expand however you can bind Expanded property of the item similar to our demos and control what is expanded. Check the code of our demos in GitHub.

Thanks Vladimir,
what's the properly you mentioned?
Could you please share the link of one of the related demos?

Regards

I’m referring the entire demo application with the PanelMenu used for navigation between examples.

1 Like

I've bound the Expanded property like you suggest but I need to handle the onclick event to iterate through the panel menu item list and close all except the one clicked.
The problem here is that the onclick event does not fire at all (I put a BP inside the method called and it's never reached).
Belove is an excerpt of the code I'm using:

        <RadzenPanelMenu Style="background-color:#EED484">
            <RadzenPanelMenuItem Text="Home" Icon="home" Style="color:black;font-size:large;font-weight:100" />
            @foreach (SAMCategory category in categoriesList)
            {
                <RadzenPanelMenuItem Text=@category.Name Image=@category.Icon Style="color:black;font-size:large;font-weight:100"
                                 @onclick=@(() => ToggleMenus(category)) Expanded=@category.Expanded>
                    @foreach (SAMApp app in category.Apps)
                    {
                        <RadzenPanelMenuItem Text=@app.Name Image=@app.Icon />
                    }
                </RadzenPanelMenuItem>
            }
        </RadzenPanelMenu>

And that's the method ToggleMenus(category):

    private void ToggleMenus (SAMCategory category)
    {
        foreach (SAMCategory c in categoriesList)
        {
            if (c.Name != category.Name)
            {
                c.Expanded = false;
            }
        }
    }

Regards

Use a model as in our demo and bind the Expanded property of the item to Expanded property of the model. In this way you will not deal with UI at all. When an item in the model Expanded is set to true you can iterate all other items in the model to set to false and the UI will be updated automatically. This is so called MVVM (Model-View-ViewModel) design pattern. Next week we will update our demos with special example for single item expand.

Sorry but what you said seems exactly what I'm doing...as I said I bound the expanded property of the panel menu item to the expanded property of our model (SAMCategory).
Maybe I'm missing something as I'm not proficient in web programming but how can I handle the iteration through all the other model's items outside the onclick event?
And why it's not fired btw?

The demos you're referencing seems to only bind the item property to the model property...am I missing somenthing?

For everyone interested, don't know whether it's the most correct way or not...but it works:
Defined a new component SAMMenuItem:

<RadzenPanelMenuItem Text=@Category.Name Image=@Category.Icon Style="color:black;font-size:large;font-weight:100"
                    ExpandedChanged=@(() => @ExpandedToggle.InvokeAsync(Category)) Expanded=@Expanded>
   @ChildContent
</RadzenPanelMenuItem>

@code {
   [Parameter]
   public SAMCategory Category { get; set; }

   [Parameter]
   public bool Expanded { 
       get
       {            
           return Category.Expanded;
       } 
       set
       {
           Category.Expanded = value;
       } 
   }

   [Parameter]
   public RenderFragment ChildContent { get; set; }

   [Parameter]
   public EventCallback<SAMCategory> ExpandedToggle { get; set; }
}

Call the component in a cycle in the MainLayout.razor:

       <RadzenPanelMenu Style="background-color:#EED484">
           <RadzenPanelMenuItem Text="Home" Icon="home" Style="color:black;font-size:large;font-weight:100" />
           @foreach (SAMCategory category in categoriesList)
           {
               <SamMenuItem Category="@category" ExpandedToggle="@ToggleMenu">
                   @foreach (SAMApp app in category.Apps)
                   {
                       <RadzenPanelMenuItem Text=@app.Name Image=@app.Icon />
                   }
               </SamMenuItem>
           }
       </RadzenPanelMenu>

Defined the ToggleMenu with parameter "category" in MainLayout.razor:

   private void ToggleMenu(SAMCategory category)
   {
       foreach (SAMCategory c in categoriesList)
       {
           if (c.Name != category.Name)
           {
               c.Expanded = false;
           }
           category.Expanded = true;
       }
   }

Now when a menu expanded the others collapse as expected

As we promised we’ve made a demo showing programmatically created items with single expand by just binding Expanded property: