[OPEN] [#1852] MenuItem inside Accordion

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [OPEN] [#1852] MenuItem inside Accordion

    Hi, refering to Issue #1851 on GitHub, can you provide a working example of MenuItem inside Accordion?

    We have try the follow, but result in accordion with empty content:

    _Sidebar.cshtml
    <ext-container region="West"
                   cls="sidebar"
                   width="240"
                   scrollable="true" 
                   layout="Accordion" 
                   paddingAsString="20">
    
        <items>
            <ext-panel title="1">
                <items>
                    <ext-menu id="myMenuTest">
                        <items>
                            <ext-menuItem text="11" />
                            <ext-menuItem text="12" />
                            <ext-menuItem text="13" />
                        </items>
                    </ext-menu>
                </items>
            </ext-panel>
            <ext-panel title="2">
                <items>
                    <ext-menu id="myMenuTest">
                        <items>
                            <ext-menuItem text="21" />
                            <ext-menuItem text="22" />
                            <ext-menuItem text="23" />
                        </items>
                    </ext-menu>
                </items>
            </ext-panel>
            <ext-panel title="3" />
        </items>
        
    </ext-container>
    After some tests we ended up by using the example in Issue #1851, but you say it was wrong.

    Can you also indicate us the tag to define which panel needs to be expanded by default?

    Thank you!
    Last edited by bbros; Jan 26, 2021 at 8:19 AM.
  2. #2
    Hello @bbros!

    Thanks for the even cleaner test case. Notwithstanding I will include icons in the provided response in order to ensure the point raised in github works here. After all, you actually could display the menu entries without a menu panel, and just their icons were misplaced.

    This alternative involves using Ext.NET 5's MenuPanel component. As we don't have another component taking a <menu> tag helper to base on, we'll build the menu entries from code behind -- which in the end maybe is what you need?

    View code (standalone, disabling layouts to avoid missing bits and pieces):

    @page
    @model MyProject.t63075_accordionMenuModel
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Issue extnet/Ext.NET#1851</title>
    </head>
    <body>
        <h1>Issue extnet/Ext.NET#1851</h1>
        <ext-container
            width="240"
            scrollable="true"
            layout="Accordion">
            <items>
                @{
                    foreach (var item in Model.Menus)
                    {
                        var panelTitle = item.Title;
                        item.Title = null;
                        <ext-panel title="@panelTitle" x-xtype="netmenupanel" x:model-menu="item" />
                    }
                }
            </items>
        </ext-container>
    </body>
    </html>
    Please note how we reference a panel and override its x-type (client-side class handle). Then bind an arbitrary model as its inner menu property. That "arbitrary model" is simply a list of menus that will be wrapped in these menu panels.

    To build the menus, in turn, this is what I've done in controller code:

    using Ext.Net;
    using System.Collections.Generic;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace MyProject
    {
        public class t63075_accordionMenuModel : PageModel
        {
            public List<Menu> Menus = new List<Menu>();
    
            // Just a list of material design icon cls to bind, in order, to menu items.
            private string[] IconClses = new string[] { "home", "analytics", "api", "toll", "build", "book", "help", "gavel", "https", "support", "verified" };
    
            public void OnGet()
            {
                // Add 4 menus (that will be accordion panels)
                Menus.Add(SubItem("File", 10));
                Menus.Add(SubItem("Edit", 4));
                Menus.Add(SubItem("Options", 8));
                Menus.Add(SubItem("About", 3));
            }
    
            private Menu SubItem(string name, int subCount)
            {
                var menu = new Menu()
                {
                    Title = name
                };
    
                // Properly nest MenuItem instances within the Menu.
                for (var cnt = 1; cnt <= subCount; cnt++)
                {
                    menu.Items.Add(new MenuItem()
                    {
                        Text = "Item #" + cnt,
                        IconCls = "x-md md-icon-" + IconClses[cnt % IconClses.Length]
                    });
                }
    
                return menu;
            }
        }
    }
    Here we just, code-wise, repeat the behavior that would be equivalent to this markup if the MenuPanel component were supported:

    <ext-menu title="@name">
        <items>
            <ext-menuItem Text="Item #1" iconCls="x-md-md-icon-home" />
            <ext-menuItem Text="Item #1" iconCls="x-md-md-icon-analytics" />
            <ext-menuItem Text="Item #1" iconCls="x-md-md-icon-api" />
        </items>
    </ext-menu>
    These blocks would then be inserted in the panel, properly composing the MenuPanel component.

    Contrary to what I said in the GitHub issue you linked, the MenuPanel client-side code is actually included in Ext.NET 7, so it is possible to reactivate it using this approach. You can also adopt a 100% C# approach and add the inner menu config to the panels using the CustomConfig property.

    In case you're wondering about going fully model-driven, here's what the page would look like:

    View
    <ext-container model="Model.AccordionContainer" />
    Controller
    // Declared as 'public Container AccordionContainer;'
    AccordionContainer = new Container()
    {
        Width = 240,
        Scrollable = true,
        Layout = LayoutType.Accordion
    };
    
    var menuPanel = new Panel()
    {
        Title = "File",
        CustomConfig = new JsObject()
    };
    
    menuPanel.CustomConfig.Add("xtype", "netmenupanel");
    menuPanel.CustomConfig.Add("menu", new JsObject(SubItem(null, 10)));
    AccordionContainer.Items.Add(menuPanel);
    
    menuPanel = new Panel()
    {
        Title = "Edit",
        CustomConfig = new JsObject()
    };
    
    menuPanel.CustomConfig.Add("xtype", "netmenupanel");
    menuPanel.CustomConfig.Add("menu", new JsObject(SubItem(null, 4)));
    AccordionContainer.Items.Add(menuPanel);
    As this won't be included in the UX development cycle, we've also logged GitHub issue #1852 to track the support status of the MenuPanel component in Ext.NET 7.

    An update shall be posted here as soon as we get the feature in Ext.NET 7.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Accordion Inside Viewport with Border LayoutType
    By AlbertoCe in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 07, 2013, 8:47 AM
  2. [OPEN] [#39] [2.0] GridPanel in Accordion
    By Timothy in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Nov 17, 2012, 12:41 AM
  3. Replies: 4
    Last Post: Aug 08, 2011, 11:57 AM
  4. Hidden check box group inside Accordion
    By Egale in forum 1.x Help
    Replies: 0
    Last Post: May 07, 2011, 8:41 AM
  5. Hidden check box group inside Accordion
    By Egale in forum 1.x Help
    Replies: 2
    Last Post: May 06, 2011, 7:46 PM

Posting Permissions