Loading Advanced XML Schema into TreePanel

Page 2 of 2 FirstFirst 12
  1. #11
    Hi Dimitris,

    Thanks, I can see the events, but not exactly sure how best to implement in my context. I am dealing with multiple treepanels (all built in code-behind) within a CardLayout panel and swap the relevant treepanel into view as required on client-side. (Each treepanel has unique ID). If I am understanding correctly it appears best approach is to pass some of the node attributes as well as node CustomAttributes (as in below example) from the respective clicked node to the ItemClick handler to then manage what needs to happen. Essentially I have a library of server-side methods that could be invoked depending on configuration. The onClick value held would be the method to call and would include the parameters to pass as well, often including {} curly braces and () brackets as well. Some examples of the XML values for onClick which I intend storing as CustomAttributes are:


    onClick="do_something('{XEXFX3X4-EX99-4XE2-X0XF-51X7X4X5EX55}');"
    onClick="do_something_else('1','0','00000000-0000-0000-0000-000000000000','YEYFY3Y4-EY99-4YE2-Y0YF-51Y7Y4Y5EY55','ZEZFZ3Z4-EZ99-4ZE2-Z0ZF-51Z7Z4Z5EZ55');"
    do_something and do_something_else are server side methods. Intention was to call the method direct from an onclick event, hence have it pre-loaded.

       return new Ext.Net.Node
               {
                   Text = text,
                   NodeID = nodeID,
                   Qtip = tooltip,
                   CustomAttributes = 
                    { 
                        new ConfigItem("pID", pID), 
                        new ConfigItem("appID", appID),
                        new ConfigItem("children", children)
                        new ConfigItem("imageBase", imageBase), 
                        new ConfigItem("imageOpen", imageOpen),
                        new ConfigItem("onClick",onClick)
                    }
               };
    PS. Can you also confirm I should strip {} curly braces / how to deal with it as it appears it is throwing problems on execution.
    Last edited by Dimitris; Apr 12, 2015 at 7:47 PM.
  2. #12
    If I am understanding correctly it appears best approach is to pass some of the node attributes as well as node CustomAttributes (as in below example) from the respective clicked node to the ItemClick handler to then manage what needs to happen.
    Yes.

    Essentially I have a library of server-side methods that could be invoked depending on configuration. The onClick value held would be the method to call and would include the parameters to pass as well, often including {} curly braces and () brackets as well.

    do_something and do_something_else are server side methods. Intention was to call the method direct from an onclick event, hence have it pre-loaded.
    I understand what you are trying to do but I do not think it is exactly the right way to go especially if you mean to call DirectMethods finally. What will certainly work is to pass all necessary data in each node and decide on what method to call depending on them. For example, based on the http://examples2.ext.net/#/TreePanel...in_CodeBehind/ example:

    Introduced the PID property:

    public class Piece
    {
        public Piece() {}
    
        public Piece(string title) 
        { 
            this.Title = title;
        }
            
        public string Title { get; set; }
    
        public string PID { 
            get 
            {
                return Guid.NewGuid().ToString();
            } 
        }
    }
    PID is passed as a custom attribute (pID):

    foreach (Piece piece in composition.Pieces)
    {
        Ext.Net.Node pieceNode = new Ext.Net.Node()
        {
            Text = piece.Title,
            Icon = Icon.Music,
            Leaf = true
        };
        pieceNode.CustomAttributes.Add(new ConfigItem
        {
            Name = "pID", 
            Value = piece.PID,
            Mode = ParameterMode.Value
        });
        compositionNode.Children.Add(pieceNode);
    }
    The tree item click listener:

    tree.Listeners.ItemClick.Handler = "onItemClick(record)";
    The onItemClick function:

    var onItemClick = function (record) {
        alert(record.raw["pID"]);
        // decide what server side method to call here based on node data
    };
    PS. Can you also confirm I should strip {} curly braces / how to deal with it as it appears it is throwing problems on execution.
    As long as they are represented as string values I do not see a problem in using them.

    You are on the right track and having multiple trees on the same page is not going to be a problem.


    Hope it helps.
  3. #13
    Hi Dimitris,

    I have managed to build ItemClick.Handler to execute JS function and obtain all data and custom attributes, which I will implement in due course. I am busy with ItemContextMenu and attempting to following below approach, however have a slight problem in that I am dynamically creating n number of menu's and where below is fixed to App.TreeContextMenu, I need to pass the ID of my context menu (which I have stored as a custom attribute within my tree node.

            var showMenu = function (view, node, item, index, e) {            
                var menu = App.TreeContextMenu;
                
    			this.menuNode = node; 
                menu.nodeName = node.get("text");                
    			view.getSelectionModel().select(node);
    		    
    		    menu.showAt([e.getXY()[0], e.getXY()[1]+10]);
    		    e.stopEvent();
            };
    Every tree node can have a separate context menu, each of which I build dynamically in code-behind as per below...

    Ext.Net.Menu mycontextmenu = new Ext.Net.Menu();
                       mycontextmenu .ID = "myIDvalue";
    
    foreach //snippet
    { 
    Ext.Net.MenuItem mycontextmenuitem = new Ext.Net.MenuItem();
                mycontextmenuitem .Text = menu_name;
                mycontextmenuitem .Listeners.Click.Handler = "onContextMenuClick(menu_action,menu_action_data);";
    }
    This is where I am at...

    var ItemContextMenu = function (view, node, item, index, e) {
               //this displays my context menu ID, so I know I have it
               //Ext.Msg.alert("ItemContextMenu", "node.raw[myIDvalue] = " + node.raw["myIDvalue"]).Show;
    
    //I am stuck here....
                var menu = App.node.raw["myIDvalue"];
    
                this.menuNode = node;
                menu.nodeName = node.get("text");
                view.getSelectionModel().select(node);
    
                menu.showAt([e.getXY()[0], e.getXY()[1] + 10]);
                e.stopEvent();
            };
    Last edited by mrVan; Apr 27, 2015 at 1:56 PM.
  4. #14
    Hi again,

    Further to previous note on contextMenu, calling the server-side Method still seems to be a problem. The javascript function can successfully display alert with all node properties including custom attributes, however calling the DirectMethod returns "ReferenceError 'getOrDoSomethingFromServer' is undefined" if using Ext.net.DirectMethod.request alternatively returns "TypeError: Unable to get property 'getOrDoSomethingFromServer' of underfined or null reference" if using App.direct.getOrDoSomethingFromServer.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
    
        protected void Page_Load(object sender, EventArgs e)
        {
             //nothing needed here
        }
    
        [DirectMethod]
        public void getOrDoSomethingFromServer(string myParam)
        {
            ExtNet.Msg.Alert("Response A from Server", myParam).Show();
        }
    
        [DirectMethod]
        public void getOrDoSomethingELSEFromServer(string myParam)
        {
            ExtNet.Msg.Alert("Response B from Server", myParam).Show();
        }
    
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Test Example - Server Call from Javascript Function</title>    
    </head>
    <body>
      
            <script>
    
             var onItemClick = function (record) {
             //alert(record.raw["pID"]);
             // decide what server side method to call here based on node data
    
            if(record.raw['action'] == 1)
            {
                App.direct.getOrDoSomethingFromServer("myParamValue")
            }
            if(record.raw['action'] == 2)
            {
                App.direct.getOrDoSomethingELSEFromServer("myParamValue")
            }
             };
    
            </script>
  5. #15
    I suggest you run the complete code example below:

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            for (int i = 1; i <= 3; i++)
            {
                Ext.Net.Menu myContextMenu = new Ext.Net.Menu();
                
                myContextMenu.ID = "menu" + i.ToString();
                
                for (int j = 1; j <= 3; j++)
                {
                    myContextMenu.Items.Add(new Ext.Net.MenuItem("Menu " + i.ToString() + " Item " + j.ToString()));
                }
    
                this.PlaceHolder1.Controls.Add(myContextMenu);
            }
                    
            Ext.Net.TreePanel tree = new Ext.Net.TreePanel();
    
            this.PlaceHolder1.Controls.Add(tree);
    
            tree.ID = "TreePanel1";
            tree.Width = Unit.Pixel(600);
            tree.Height = Unit.Pixel(450);
            tree.Icon = Icon.BookOpen;
            tree.Title = "Catalog";
            tree.AutoScroll = true;
    
            Ext.Net.Button btnExpand = new Ext.Net.Button();
            btnExpand.Text = "Expand All";
            btnExpand.Listeners.Click.Handler = tree.ClientID + ".expandAll();";
    
            Ext.Net.Button btnCollapse = new Ext.Net.Button();
            btnCollapse.Text = "Collapse All";
            btnCollapse.Listeners.Click.Handler = tree.ClientID + ".collapseAll();";
    
            Toolbar toolBar = new Toolbar();
            toolBar.ID = "Toolbar1";
            toolBar.Items.Add(btnExpand);
            toolBar.Items.Add(btnCollapse);
            tree.TopBar.Add(toolBar);
    
            StatusBar statusBar = new StatusBar();
            statusBar.ID = "StatusBar1";
            statusBar.AutoClear = 1000;
            tree.BottomBar.Add(statusBar);
    
            tree.Listeners.ItemClick.Handler = "onItemClick(record)";
            tree.Listeners.ItemExpand.Handler = statusBar.ClientID + ".setStatus({text: 'Node Expanded: <b>' + item.data.text + '</b>', clear: false});";
            tree.Listeners.ItemContextMenu.Fn = "onItemContextMenu";
            tree.Listeners.ItemExpand.Buffer = 30;
            tree.Listeners.ItemCollapse.Handler = statusBar.ClientID + ".setStatus({text: 'Node Collapsed: <b>' + item.data.text + '</b>', clear: false});";
            tree.Listeners.ItemCollapse.Buffer = 30;
    
            Ext.Net.Node root = new Ext.Net.Node()
            {
                Text = "Composers"
            };
            root.Expanded = true;
            tree.Root.Add(root);
    
            List<Composer> composers = this.GetData();
    
            foreach (Composer composer in composers)
            {
                Ext.Net.Node composerNode = new Ext.Net.Node()
                {
                    Text = composer.Name,
                    Icon = Icon.UserGray
                };
                root.Children.Add(composerNode);
                
                foreach(Composition composition in composer.Compositions)
                {
                    Ext.Net.Node compositionNode = new Ext.Net.Node()
                    {
                        Text = composition.Type.ToString()
                    };
                    composerNode.Children.Add(compositionNode);
    
                    foreach (Piece piece in composition.Pieces)
                    {
                        Ext.Net.Node pieceNode = new Ext.Net.Node()
                        {
                            Text = piece.Title,
                            Icon = Icon.Music,
                            Leaf = true
                        };
                        pieceNode.CustomAttributes.Add(new ConfigItem
                        {
                            Name = "pID",
                            Value = piece.PID,
                            Mode = ParameterMode.Value
                        });
                        pieceNode.CustomAttributes.Add(new ConfigItem
                        {
                            Name = "myIDvalue",
                            Value = "menu" + piece.MyIDValue.ToString(),
                            Mode = ParameterMode.Value
                        });                    
                        compositionNode.Children.Add(pieceNode);
                    }
                }
            } 
        }
        
        public class Composer
        {
            public Composer(string name) { this.Name = name; }
            public string Name { get; set; }
            
            private List<Composition> compositions;
            public List<Composition> Compositions
            { 
                get
                {
                    if (this.compositions == null)
                    {
                        this.compositions = new List<Composition>();
                    }
                    return this.compositions;
                } 
            }
        }
    
        public class Composition
        {
            public Composition() { }
    
            public Composition(CompositionType type)
            {
                this.Type = type;
            }
            
            public CompositionType Type { get; set; }
    
            private List<Piece> pieces;
            public List<Piece> Pieces
            {
                get
                {
                    if (this.pieces == null)
                    {
                        this.pieces = new List<Piece>();
                    }
                    return this.pieces;
                }
            } 
        }
            
        public class Piece
        {
            public static Random rnd = new Random();
            
            public Piece() {}
    
            public Piece(string title) 
            { 
                this.Title = title; 
            }
            
            public string Title { get; set; }
    
            public string PID
            {
                get
                {
                    return Guid.NewGuid().ToString();
                }
            }        
            
            public int MyIDValue
            {
                get
                {
                    return rnd.Next(1, 4);
                }
            }
        }
    
        public enum CompositionType
        {
            Concertos,
            Quartets,
            Sonatas,
            Symphonies
        }
    
        public List<Composer> GetData()
        { 
            Composer beethoven = new Composer("Beethoven");
    
            Composition beethovenConcertos = new Composition(CompositionType.Concertos);
            Composition beethovenQuartets = new Composition(CompositionType.Quartets);
            Composition beethovenSonatas = new Composition(CompositionType.Sonatas);
            Composition beethovenSymphonies = new Composition(CompositionType.Symphonies);
    
            beethovenConcertos.Pieces.AddRange(new List<Piece> { 
                new Piece{ Title = "No. 1 - C" },
                new Piece{ Title = "No. 2 - B-Flat Major" },
                new Piece{ Title = "No. 3 - C Minor" },
                new Piece{ Title = "No. 4 - G Major" },
                new Piece{ Title = "No. 5 - E-Flat Major" }
            });
    
            beethovenQuartets.Pieces.AddRange(new List<Piece> {
                new Piece{ Title = "Six String Quartets" },
                new Piece{ Title = "Three String Quartets" },
                new Piece{ Title = "Grosse Fugue for String Quartets" }
            });
    
            beethovenSonatas.Pieces.AddRange(new List<Piece> {
                new Piece{ Title = "Sonata in A Minor" },
                new Piece{ Title = "sonata in F Major" }
            });
    
            beethovenSymphonies.Pieces.AddRange(new List<Piece> {
                new Piece{ Title = "No. 1 - C Major" },
                new Piece{ Title = "No. 2 - D Major" },
                new Piece{ Title = "No. 3 - E-Flat Major" },
                new Piece{ Title = "No. 4 - B-Flat Major" },
                new Piece{ Title = "No. 5 - C Minor" },
                new Piece{ Title = "No. 6 - F Major" },
                new Piece{ Title = "No. 7 - A Major" },
                new Piece{ Title = "No. 8 - F Major" },
                new Piece{ Title = "No. 9 - D Minor" }
            });
    
            beethoven.Compositions.AddRange(new List<Composition>{
                beethovenConcertos, 
                beethovenQuartets,
                beethovenSonatas,
                beethovenSymphonies 
            });
    
    
            Composer brahms = new Composer("Brahms");
    
            Composition brahmsConcertos = new Composition(CompositionType.Concertos);
            Composition brahmsQuartets = new Composition(CompositionType.Quartets);
            Composition brahmsSonatas = new Composition(CompositionType.Sonatas);
            Composition brahmsSymphonies = new Composition(CompositionType.Symphonies);
    
            brahmsConcertos.Pieces.AddRange(new List<Piece> {
                new Piece{ Title = "Violin Concerto" },
                new Piece{ Title = "Double Concerto - A Minor" },
                new Piece{ Title = "Piano Concerto No. 1 - D Minor" },
                new Piece{ Title = "Piano Concerto No. 2 - B-Flat Major" }
            });
    
            brahmsQuartets.Pieces.AddRange(new List<Piece> {
                new Piece{ Title = "Piano Quartet No. 1 - G Minor" },
                new Piece{ Title = "Piano Quartet No. 2 - A Major" },
                new Piece{ Title = "Piano Quartet No. 3 - C Minor" },
                new Piece{ Title = "Piano Quartet No. 3 - B-Flat Minor" }
            });
    
            brahmsSonatas.Pieces.AddRange(new List<Piece> {
                new Piece{ Title = "Two Sonatas for Clarinet - F Minor" },
                new Piece{ Title = "Two Sonatas for Clarinet - E-Flat Major" }
            });
    
            brahmsSymphonies.Pieces.AddRange(new List<Piece> {
                new Piece{ Title = "No. 1 - C Minor" },
                new Piece{ Title = "No. 2 - D Minor" },
                new Piece{ Title = "No. 3 - F Major" },
                new Piece{ Title = "No. 4 - E Minor" }
            });
    
            brahms.Compositions.AddRange(new List<Composition>{
                brahmsConcertos, 
                brahmsQuartets,
                brahmsSonatas,
                brahmsSymphonies 
            });
            
            
            Composer mozart = new Composer("Mozart");
    
            Composition mozartConcertos = new Composition(CompositionType.Concertos);
    
            mozartConcertos.Pieces.AddRange(new List<Piece> {
                new Piece{ Title = "Piano Concerto No. 12" },
                new Piece{ Title = "Piano Concerto No. 17" },
                new Piece{ Title = "Clarinet Concerto" },
                new Piece{ Title = "Violin Concerto No. 5" },
                new Piece{ Title = "Violin Concerto No. 4" }
            });
    
            mozart.Compositions.Add(mozartConcertos);
    
            return new List<Composer>{ beethoven, brahms, mozart };
        }
    
        [DirectMethod]
        public void GetOrDoSomethingFromServer(string id)
        {
            X.Msg.Info("GetOrDoSomethingFromServer", "Called by node " + id).Show();
        }
            
        [DirectMethod]
        public void GetOrDoSomethingElseFromServer(string id)
        {
            X.Msg.Info("GetOrDoSomethingElseFromServer", "Called by node " + id).Show();
        }
    </script>
    
    <!DOCTYPE html>
        
    <html>
    <head runat="server">
        <title>Tree with Events and ContextMenu</title>
        <script>
            var onItemClick = function (record) {            
                App.StatusBar1.setStatus({text: 'Node Selected: <b>' + record.data.text + '</b> (' + record.raw["pID"] + ")", clear: false});
    
                // decide what server side method to call here based on node data
                if (record.raw["myIDvalue"] == "menu1") {
                    App.direct.GetOrDoSomethingFromServer(record.raw["pID"]);
                }
                else {
                    App.direct.GetOrDoSomethingElseFromServer(record.raw["pID"]);
                }
            };
    
            var onItemContextMenu = function (view, node, item, index, e) {
                var menu = Ext.getCmp(node.raw["myIDvalue"]);
    
                this.menuNode = node;
                menu.nodeName = node.get("text");
                view.getSelectionModel().select(node);
    
                menu.showAt([e.getXY()[0], e.getXY()[1] + 10]);
                e.stopEvent();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>Tree with Events and ContextMenu</h1>
    
            <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
        </form>
    </body>
    </html>

    Hope it helps.
  6. #16
    Hi Dimitris,

    Thank you, it has helped and I can run your example within my Visual Studio solution, however when aligning my code I still get the following error

    JavaScript critical error in (unknown source location)\n\nSCRIPT1004: Expected ';'

    if you have any ideas... I have the exact same [DirectMethods] and nothing else in my javascript functions, however the minute I include the App.direct.GetOrDoSomethingFromServer(MyIdValue) line it throws the above error.

    Much appreciate the support
  7. #17
    Hi Dimitris,

    I have separated all my treepanel code from main solution and it is working great. So thank you. The (JavaScript critical error in (unknown source location)\n\nSCRIPT1004: Expected ';') problem is still around but I have realised it is a generic issue and why I was having such difficulty. I will therefore re-build and try isolate and submit new thread if required on that.

    This thread can be closed. Thank you for awesome support.
  8. #18
    I am glad things worked out for you. Thank you for your patience and feedback. Keep on enjoying Ext.NET.
Page 2 of 2 FirstFirst 12

Similar Threads

  1. XML Extnet Schema to avoid Information Error in web.config
    By equiman in forum Examples and Extras
    Replies: 4
    Last Post: Mar 19, 2015, 4:25 PM
  2. [CLOSED] DB Schema for Calendar
    By rthiney in forum 2.x Premium Help
    Replies: 1
    Last Post: Oct 30, 2014, 9:41 PM
  3. [CLOSED] pre-loading a TreePanel BUT only for 1 or 2 levels?
    By adrianot in forum 2.x Premium Help
    Replies: 1
    Last Post: May 07, 2014, 3:54 PM
  4. Advanced Treepanel checkboxes
    By jchau in forum Feature Requests
    Replies: 4
    Last Post: Jan 28, 2009, 10:45 AM
  5. [CLOSED] GridPanel / Store schema
    By methode in forum 1.x Premium Help
    Replies: 8
    Last Post: Jan 13, 2009, 4:43 PM

Tags for this Thread

Posting Permissions