Dynamic Menu Accordion

  1. #1

    Dynamic Menu Accordion

    Hi guys,
    I am trying to create a menu like this
    Click image for larger version. 

Name:	menuaccordinon.JPG 
Views:	57 
Size:	47.3 KB 
ID:	24915

    and this is my index.cshtml code
     X.Panel()
                .ID("MenuAccordion")
                .Region(Region.West)
                .Layout(LayoutType.Accordion)
                .Title("MENU")
                .Collapsible(true)
                .MinWidth(200)
                .MaxWidth(300)
                .Width(250)
                .Items(
    
                        X.TreePanel()
    
                            .Title("PRINCIPAL")
                            .ID("menuPrincipal")
                            .Width(250)
                            .Collapsible(true)
                            .Split(true)
                            .MinWidth(200)
                            .MaxWidth(300)
                            .Icon(Icon.Accept)
                            .Listeners(l =>
                            {
                                l.ItemClick.Handler = "if ('record.data.url') { loadPage(#{MiPanel}, record); return false; }";
                               // l.ItemClick.Handler = "if (record.isLeaf()) {e.stopEvent(); loadPage(#{MiPanel}, record); } else{ record[record.isExpanded() ? 'collapse' : 'expand']();}";
                            })
                            .RootVisible(false)
                        //.Root(Model)
                        ,
                        X.TreePanel()
    
                            .Title("ALMACEN")
                            .ID("menuAlmacen")
                            .Width(250)
                            .Collapsible(true)
                            .Split(true)
                            .MinWidth(200)
                            .MaxWidth(300)
                            .Listeners(l =>
                            {
                                l.ItemClick.Handler = "if ('record.data.url') { loadPage(#{MiPanel}, record); return false; }";
                                //l.ItemClick.Handler = "if (record.isLeaf()) {e.stopEvent(); loadPage(#{MiPanel}, record); } else{ record[record.isExpanded() ? 'collapse' : 'expand']();}";
                            })
                           // .RootVisible(false)
                        //.Root(Model)
                        ,
    and this is my controller code

     public ActionResult Index(short id_usuario)
            {
                Thread.CurrentThread.CurrentCulture = new CultureInfo("es");
                Thread.CurrentThread.CurrentUICulture = new CultureInfo("es");
                ViewData["lang"] = "es";
    
                //pMenu_DOM o_DOM = new pMenu_DOM();
                List<pMenu_DTO> opciones = new List<pMenu_DTO>();
                pMenu_DTO user_parametros = new pMenu_DTO();
    
                if (WebAutenticaServicio.getAutenticacionUsuario.estadoValidado)
                {
                    user_parametros.usuario = id_usuario;
                    opciones = pMenu_DOM.Lista(user_parametros);
    
    
                    if (opciones.Where(p => p.desmenu == "ALMACEN").FirstOrDefault() != null)
                    {
                        this.GetCmp<TreePanel>("menuAlmacen").Hidden = false;
                        var idmenu = opciones.Where(p => p.desmenu == "ALMACEN").FirstOrDefault().idmenu;
    
                        List<pMenu_DTO> oAlmacen = opciones.Where(x => x.idmenupadre == idmenu).ToList();
                        Node nAlmacen = ListarMenu(oAlmacen, idmenu);
                        nAlmacen.NodeID = "rootAlmacen";
    
                      
    
                        this.GetCmp<Ext.Net.TreePanel>("menuAlmacen").Root.Add(nAlmacen);
                    }
                   
                }
                else
                {
                    return RedirectToAction("Login", "Acceso");
                }
    
    
                // return View(TreeMenuModel.ConsultaMenu(opciones));
                return View();
            }
    the problem is that I have two ChildNodes in nAlmacen variable and then insert into rootnode in my treePanel
     this.GetCmp<Ext.Net.TreePanel>("menuAlmacen").Root.Add(nAlmacen);
    but i can see in my view

    please somebody can help me
  2. #2
    Hello @jogave!

    Can't say much unless you provide a sample code we can actually run from our side. I believe all the login authentication aspect from your code snippets can be removed and turned into a simpler accordion-layout panel with tree panels inside and having one item added on startup if a (local?) variable is true, right?

    It seems you are just trying to add the root entry before the panel had its data bound so it is just being overridden by the markup contents, so maybe it would take a callback or deferred call in order to add the additional menu entries to the tree panels. But that's just a guess without being able to run your test case our side.

    If in doubt, here's some tips on making runnable test cases we can help you with:
    Tips for creating simplified code samples
    Fabrício Murta
    Developer & Support Expert
  3. #3

    New Index ActionResult

    Thanks for reply Fabricio, this is a new ActionResult for to try you

    
    public ActionResult Index(short id_usuario)
    {
                
    
      List<pMenu_DTO> opciones = new List<pMenu_DTO>();
               
      opciones.Add(new pMenu_DOT{idmenu=1, desmenu= 'PRINCIPAL', urlmenu=null, nivelmenu=1, idmenupadre=0, ordenmenu=1, tipomenu='MEN'});
      opciones.Add(new pMenu_DOT{idmenu=2, desmenu= 'ALMACEN', urlmenu=null, nivelmenu=1, idmenupadre=0, ordenmenu=2, tipomenu='MEN'});
      opciones.Add(new pMenu_DOT{idmenu=3, desmenu= 'COMPRAS', urlmenu=null, nivelmenu=1, idmenupadre=0, ordenmenu=3, tipomenu='MEN'});
      opciones.Add(new pMenu_DOT{idmenu=4, desmenu= 'Almacen1', urlmenu=null, nivelmenu=1, idmenupadre=2, ordenmenu=1, tipomenu='OPC'});
      opciones.Add(new pMenu_DOT{idmenu=5, desmenu= 'Almacen2', urlmenu=null, nivelmenu=1, idmenupadre=2, ordenmenu=2, tipomenu='OPC'});
    
       if (opciones.Where(p => p.desmenu == "ALMACEN").FirstOrDefault() != null)
       {
        this.GetCmp<TreePanel>("menuAlmacen").Hidden = false;
        var idmenu = opciones.Where(p => p.desmenu == "ALMACEN").FirstOrDefault().idmenu;
    
        List<pMenu_DTO> oAlmacen = opciones.Where(x => x.idmenupadre == idmenu).ToList();
        Node nAlmacen = ListarMenu(oAlmacen, idmenu);
        nAlmacen.NodeID = "rootAlmacen";
    
        this.GetCmp<Ext.Net.TreePanel>("menuAlmacen").Root.Add(nAlmacen);
       }              
               
    
    
               
       return View();
    }
    
    
     public class pMenu_DTO
        {
            public int idmenu { get; set; }
            public string desmenu { get; set; }
            public string urlmenu { get; set; }
            public Int16 nivelmenu { get; set; }
            public Int16 idmenupadre { get; set; }
            public Int16 ordenmenu { get; set; }
            public string tipomenu { get; set; }
            public string iconmenu { get; set; }
            public bool indvigencia { get; set; }
            public Int16 usuario { get; set; }
        }
  4. #4

    This code create the menu

     public Node ListarMenu(List<pMenu_DTO> listaMenu, int idpadre)
            {
                Node ndoPrincipal = new Node();
                Node ndoMenu;
                listaMenu.Where(menuConsulta => menuConsulta.idmenupadre == idpadre)
                .ToList().ForEach(menuRaiz =>
                {
                    ndoMenu = new Node
                    {
                        NodeID = menuRaiz.idmenu.ToString(),
                        Text = menuRaiz.desmenu,
                        Leaf = false
                    };
                    ndoMenu.Children.AddRange(ListarOpciones(menuRaiz, listaMenu));
                    ndoPrincipal.Children.Add(ndoMenu);
    
                });
                return ndoPrincipal;
            }
    
            public List<Node> ListarOpciones(pMenu_DTO nodoConsulta, List<pMenu_DTO> listaMenu)
            {
    
                Node ndoConsulta;
                List<Node> lstConsulta = new List<Node>();
                //listaMenu.Where(opcionConsulta => opcionConsulta.tipomenu == "OPC" && opcionConsulta.idmenupadre == nodoConsulta.idmenu)
    
                listaMenu.Where(opcionConsulta => opcionConsulta.idmenupadre == nodoConsulta.idmenu).ToList()
                    .ForEach(nodoOpcion => {
                        ndoConsulta = new Node
                        {
                            NodeID = nodoOpcion.idmenu.ToString(),
                            Text = nodoOpcion.desmenu,
                            Href = "#",
                            Leaf = false
                        };
                        ndoConsulta.CustomAttributes.Add(new ConfigItem("urlmenu", nodoOpcion.urlmenu));
                        ndoConsulta.CustomAttributes.Add(new ConfigItem("idmenu", nodoOpcion.idmenu.ToString()));
                        ndoConsulta.Children.AddRange(ListarOpciones(nodoOpcion, listaMenu));
                        ndoConsulta.Leaf = ndoConsulta.Children.Count > 0 ? false : true;
                        lstConsulta.Add(ndoConsulta);
                    });
    
                return lstConsulta;
            }

Similar Threads

  1. [CLOSED] Dynamic menu items in menu panel creation problem
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 10, 2013, 10:29 AM
  2. [CLOSED] Accordion menu items with 32x32 icons
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 22, 2012, 1:03 PM
  3. Replies: 1
    Last Post: Sep 22, 2010, 7:07 AM
  4. [CLOSED] accordion menu in codebehind
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 29, 2010, 5:34 PM
  5. Dynamic Accordion Items
    By danr in forum 1.x Help
    Replies: 3
    Last Post: Jan 09, 2009, 9:13 PM

Tags for this Thread

Posting Permissions