We have been working hard on Ext.NET Mobile and are happy to announce a Beta release is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read more here

[CLOSED] How would I selected an item in TreePanel from the codebehind ???

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] How would I selected an item in TreePanel from the codebehind ???

    Last edited by Daniil; Jul 27, 2012 at 4:01 PM. Reason: [CLOSED]
  2. #2
    Hi,

    1. Initially.

    Please handle the TreePanel ViewReady event and the client side select method of the selection model.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-select

    2. During DirectEvent/DirectMethod.

    Please use the SelectionModel Select method.
    TreePanel1.GetSelectionModel().Select(id | index | ModelProxy | etc.);
    Daniil Veriga
    Developer & Support Expert
  3. #3
    I'm not too familiar with this TreePanel control. I have created a sample where I need your help just to highlight any child item.

    In Page Load I commented out your Line of Code, can you help there?

    // NOTE: Need help here... (If I need to select the node 'Insufficient Workers' ReasonId = 6, how would I do it)
    //TreePanel1.GetSelectionModel().Select(id, index, node);


    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
    
        protected void Page_Load(object sender, EventArgs e)
        {
            var root = new Node
            {
                Text = "Downtime",
                Icon = Icon.TimeRed,
                Expanded = true
            };
            TreePanel1.Root.Add(root);
    
            var downtimes = GetData();
    
            foreach (var downtime in downtimes)
            {
                var downtimeNode = new Node()
                {
                    Text = downtime.Type.ToString(),
                    Icon = Icon.WrenchOrange
                };
                root.Children.Add(downtimeNode);
    
                foreach (var reason in downtime.Reason)
                {
                    var reasonNode = new Node()
                    {
                        NodeID = @"_" + reason.ReasonId,
                        Text = reason.Description,
                        Icon = Icon.Wrench,
                        Leaf = true
                    };
                    downtimeNode.Children.Add(reasonNode);
                }
            }
    
            // NOTE: Need help here... (If I need to select the node 'Insufficient Workers' ReasonId = 6, how would I do it)
            //TreePanel1.GetSelectionModel().Select(id, index, node);
        }
    
    
        public List<DownTime> GetData()
        {
            var mechanical = new DownTime(DowntimeType.Mechanical);
            var scheduled = new DownTime(DowntimeType.Scheduled);
            var production = new DownTime(DowntimeType.Production);
            var electrical = new DownTime(DowntimeType.Electrical);
            var labor = new DownTime(DowntimeType.Labor);
    
            mechanical.Reason.AddRange(new List<Reason>
                                           {
                                               new Reason
                                                   {
                                                       Description = "Line Failure",
                                                       ReasonId = Convert.ToString(1)
                                                   },
                                               new Reason
                                                   {
                                                       Description = "Maintenance",
                                                       ReasonId = Convert.ToString(2)
                                                   }
                                           });
    
    
            scheduled.Reason.AddRange(new List<Reason>
                                          {
                                              new Reason
                                                  {
                                                      Description = "Meeting",
                                                      ReasonId = Convert.ToString(3)
                                                  }
                                          });
    
            production.Reason.AddRange(new List<Reason>
                                           {
                                               new Reason
                                                   {
                                                       Description = "Order Change",
                                                       ReasonId = Convert.ToString(4)
                                                   }
                                           });
    
            electrical.Reason.AddRange(new List<Reason>
                                           {
                                               new Reason
                                                   {
                                                       Description = "Power Outage",
                                                       ReasonId = Convert.ToString(5)
                                                   }
                                           });
    
            labor.Reason.AddRange(new List<Reason>
                                      {
                                          new Reason
                                              {
                                                  Description = "Insufficient Workers",
                                                  ReasonId = Convert.ToString(6)
                                              }
                                      });
    
    
            return new List<DownTime> { electrical, labor, mechanical, production, scheduled };
        }
    
    
        public class DownTime
        {
            public DownTime() { }
    
            public DownTime(DowntimeType type)
            {
                this.Type = type;
            }
    
            public DowntimeType Type { get; set; }
    
            private List<Reason> reason;
            public List<Reason> Reason
            {
                get
                {
                    if (this.reason == null)
                    {
                        this.reason = new List<Reason>();
                    }
                    return this.reason;
                }
            }
        }
    
        public class Reason
        {
            public Reason() { }
    
            public Reason(string description, string reasonId)
            {
                this.Description = description;
                this.ReasonId = reasonId;
            }
    
            public string Description { get; set; }
            public string ReasonId { get; set; }
        }
    
        public enum DowntimeType
        {
            Mechanical,
            Scheduled,
            Production,
            Electrical,
            Labor
        }
        
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Multi Node TreePanel built using markup - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            Multi Node TreePanel built using markup & Code Behind</h1>
        <br />
        <ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="450" Icon="Lorry"
            Title="Downtimes" AutoScroll="true">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Expand All">
                            <Listeners>
                                <Click Handler="#{TreePanel1}.expandAll();" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button ID="Button2" runat="server" Text="Collapse All">
                            <Listeners>
                                <Click Handler="#{TreePanel1}.collapseAll();" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <BottomBar>
                <ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" />
            </BottomBar>
            <Listeners>
                <ItemClick Handler="if(record.isLeaf()){#{StatusBar1}.setStatus({text: 'Downtime Selected: <b>' + record.data.text + '</b>', clear: false})};" />
                <BeforeSelect Handler="return record.isLeaf();" />
                <AfterRender Handler="#{TreePanel1}.expandAll();" />
            </Listeners>
        </ext:TreePanel>
        </form>
    </body>
    </html>
    Quote Originally Posted by Daniil View Post
    Hi,

    1. Initially.

    Please handle the TreePanel ViewReady event and the client side select method of the selection model.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-select

    2. During DirectEvent/DirectMethod.

    Please use the SelectionModel Select method.
    TreePanel1.GetSelectionModel().Select(id | index | ModelProxy | etc.);
  4. #4
    Following this recommendation.

    Quote Originally Posted by Daniil View Post
    1. Initially.

    Please handle the TreePanel ViewReady event and the client side select method of the selection model.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-select
    Example
    TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().getNodeById('_6'));";
    Daniil Veriga
    Developer & Support Expert
  5. #5
    That works perfectly, but I notice my Status Bar doesn't show when the page first loads up.

    Can that be resolved? I looked in both IE8 & Firefox, same issue...

    Quote Originally Posted by Daniil View Post
    Following this recommendation.



    Example
    TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().getNodeById('_6'));";
  6. #6

    Actually it DOES NOT work on a DirectEvent Method...

    Sample below:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
    
        protected void Page_Load(object sender, EventArgs e)
        {
            var root = new Node
            {
                Text = "Downtime",
                Icon = Icon.TimeRed,
                Expanded = true
            };
            TreePanel1.Root.Add(root);
    
            var downtimes = GetData();
    
            foreach (var downtime in downtimes)
            {
                var downtimeNode = new Node()
                {
                    Text = downtime.Type.ToString(),
                    Icon = Icon.WrenchOrange
                };
                root.Children.Add(downtimeNode);
    
                foreach (var reason in downtime.Reason)
                {
                    var reasonNode = new Node()
                    {
                        NodeID = @"_" + reason.ReasonId,
                        Text = reason.Description,
                        Icon = Icon.Wrench,
                        Leaf = true
                    };
                    downtimeNode.Children.Add(reasonNode);
                }
            }
            
            //TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().getNodeById('_6'));"; 
        }
    
    
        protected void Select(object sender, DirectEventArgs e)
        {
            TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().getNodeById('_6'));"; 
            //TreePanel1.UpdateLayout();
        }
    
        public List<DownTime> GetData()
        {
            var mechanical = new DownTime(DowntimeType.Mechanical);
            var scheduled = new DownTime(DowntimeType.Scheduled);
            var production = new DownTime(DowntimeType.Production);
            var electrical = new DownTime(DowntimeType.Electrical);
            var labor = new DownTime(DowntimeType.Labor);
    
            mechanical.Reason.AddRange(new List<Reason>
                                           {
                                               new Reason
                                                   {
                                                       Description = "Line Failure",
                                                       ReasonId = Convert.ToString(1)
                                                   },
                                               new Reason
                                                   {
                                                       Description = "Maintenance",
                                                       ReasonId = Convert.ToString(2)
                                                   }
                                           });
    
    
            scheduled.Reason.AddRange(new List<Reason>
                                          {
                                              new Reason
                                                  {
                                                      Description = "Meeting",
                                                      ReasonId = Convert.ToString(3)
                                                  }
                                          });
    
            production.Reason.AddRange(new List<Reason>
                                           {
                                               new Reason
                                                   {
                                                       Description = "Order Change",
                                                       ReasonId = Convert.ToString(4)
                                                   }
                                           });
    
            electrical.Reason.AddRange(new List<Reason>
                                           {
                                               new Reason
                                                   {
                                                       Description = "Power Outage",
                                                       ReasonId = Convert.ToString(5)
                                                   }
                                           });
    
            labor.Reason.AddRange(new List<Reason>
                                      {
                                          new Reason
                                              {
                                                  Description = "Insufficient Workers",
                                                  ReasonId = Convert.ToString(6)
                                              }
                                      });
    
    
            return new List<DownTime> { electrical, labor, mechanical, production, scheduled };
        }
    
    
        public class DownTime
        {
            public DownTime() { }
    
            public DownTime(DowntimeType type)
            {
                this.Type = type;
            }
    
            public DowntimeType Type { get; set; }
    
            private List<Reason> reason;
            public List<Reason> Reason
            {
                get
                {
                    if (this.reason == null)
                    {
                        this.reason = new List<Reason>();
                    }
                    return this.reason;
                }
            }
        }
    
        public class Reason
        {
            public Reason() { }
    
            public Reason(string description, string reasonId)
            {
                this.Description = description;
                this.ReasonId = reasonId;
            }
    
            public string Description { get; set; }
            public string ReasonId { get; set; }
        }
    
        public enum DowntimeType
        {
            Mechanical,
            Scheduled,
            Production,
            Electrical,
            Labor
        }
        
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Multi Node TreePanel built using markup & Code Behind - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            Multi Node TreePanel built using markup & Code Behind</h1>
            <ext:Button ID="Button1" runat="server" OnDirectClick="Select" Text="Select" />
        <br />
        <ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="450" Icon="Lorry"
            Title="Downtimes" AutoScroll="true">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Expand All">
                            <Listeners>
                                <Click Handler="#{TreePanel1}.expandAll();" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button runat="server" Text="Collapse All">
                            <Listeners>
                                <Click Handler="#{TreePanel1}.collapseAll();" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <BottomBar>
                <ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" />
            </BottomBar>
            <Listeners>
                <ItemClick Handler="if(record.isLeaf()){#{StatusBar1}.setStatus({text: 'Downtime Selected: <b>' + record.data.text + '</b>', clear: false})};" />
                <BeforeSelect Handler="return record.isLeaf();" />
                <AfterRender Handler="#{TreePanel1}.expandAll();" />
            </Listeners>
        </ext:TreePanel>
        </form>
    </body>
    </html>

    Quote Originally Posted by Fahd View Post
    That works perfectly, but I notice my Status Bar doesn't show when the page first loads up.

    Can that be resolved? I looked in both IE8 & Firefox, same issue...
  7. #7
    Quote Originally Posted by Fahd View Post
    That works perfectly, but I notice my Status Bar doesn't show when the page first loads up.

    Can that be resolved? I looked in both IE8 & Firefox, same issue...
    Because there are no Items and no Height. Please add any item or set up Height explicitly.

    Actually it DOES NOT work on a DirectEvent Method...
    Setting up Listeners when a widget is already rendered doesn't affect on client.

    Probably, you have missed the following comment.
    Quote Originally Posted by Daniil View Post
    2. During DirectEvent/DirectMethod.

    Please use the SelectionModel Select method.
    TreePanel1.GetSelectionModel().Select(id | index | ModelProxy | etc.);
    Daniil Veriga
    Developer & Support Expert
  8. #8
    First issue, I set up the Height explicity but when the Page first loads up, it doesn't show any text in my Status bar because my listener won't get fired until I actually click an item, How can I show the selected item either on Page Load or on a Direct Event ?? I would prefer on a Direct Event.

    Secondly, when I try your example from the code below, I get an error:
    Error: "Object reference not set to an instance of an object."

    //TreePanel1.GetSelectionModel().Select(id | index | ModelProxy | etc.); 
    
        protected void Select(object sender, DirectEventArgs e)
        {
            // NOTE: Should highlight 'Power Outage'
            TreePanel1.GetSelectionModel().Select(5);
        }
    My Sample:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
    
        protected void Page_Load(object sender, EventArgs e)
        {
            var root = new Node
            {
                Text = "Downtime",
                Icon = Icon.TimeRed,
                Expanded = true
            };
            TreePanel1.Root.Add(root);
    
            var downtimes = GetData();
    
            foreach (var downtime in downtimes)
            {
                var downtimeNode = new Node()
                {
                    Text = downtime.Type.ToString(),
                    Icon = Icon.WrenchOrange
                };
                root.Children.Add(downtimeNode);
    
                foreach (var reason in downtime.Reason)
                {
                    var reasonNode = new Node()
                    {
                        NodeID = reason.ReasonId,
                        Text = reason.Description,
                        Icon = Icon.Wrench,
                        Leaf = true
                    };
                    downtimeNode.Children.Add(reasonNode);
                }
            }    
            TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().getNodeById(6));"; 
        }
    
    
        protected void Select(object sender, DirectEventArgs e)
        {
            // NOTE: Should highlight 'Power Outage'
            TreePanel1.GetSelectionModel().Select(5);
        }
    
        public List<DownTime> GetData()
        {
            var mechanical = new DownTime(DowntimeType.Mechanical);
            var scheduled = new DownTime(DowntimeType.Scheduled);
            var production = new DownTime(DowntimeType.Production);
            var electrical = new DownTime(DowntimeType.Electrical);
            var labor = new DownTime(DowntimeType.Labor);
    
            mechanical.Reason.AddRange(new List<Reason>
                                           {
                                               new Reason
                                                   {
                                                       Description = "Line Failure",
                                                       ReasonId = Convert.ToString(1)
                                                   },
                                               new Reason
                                                   {
                                                       Description = "Maintenance",
                                                       ReasonId = Convert.ToString(2)
                                                   }
                                           });
    
    
            scheduled.Reason.AddRange(new List<Reason>
                                          {
                                              new Reason
                                                  {
                                                      Description = "Meeting",
                                                      ReasonId = Convert.ToString(3)
                                                  }
                                          });
    
            production.Reason.AddRange(new List<Reason>
                                           {
                                               new Reason
                                                   {
                                                       Description = "Order Change",
                                                       ReasonId = Convert.ToString(4)
                                                   }
                                           });
    
            electrical.Reason.AddRange(new List<Reason>
                                           {
                                               new Reason
                                                   {
                                                       Description = "Power Outage",
                                                       ReasonId = Convert.ToString(5)
                                                   }
                                           });
    
            labor.Reason.AddRange(new List<Reason>
                                      {
                                          new Reason
                                              {
                                                  Description = "Insufficient Workers",
                                                  ReasonId = Convert.ToString(6)
                                              }
                                      });
    
    
            return new List<DownTime> { electrical, labor, mechanical, production, scheduled };
        }
    
    
        public class DownTime
        {
            public DownTime() { }
    
            public DownTime(DowntimeType type)
            {
                this.Type = type;
            }
    
            public DowntimeType Type { get; set; }
    
            private List<Reason> reason;
            public List<Reason> Reason
            {
                get
                {
                    if (this.reason == null)
                    {
                        this.reason = new List<Reason>();
                    }
                    return this.reason;
                }
            }
        }
    
        public class Reason
        {
            public Reason() { }
    
            public Reason(string description, string reasonId)
            {
                this.Description = description;
                this.ReasonId = reasonId;
            }
    
            public string Description { get; set; }
            public string ReasonId { get; set; }
        }
    
        public enum DowntimeType
        {
            Mechanical,
            Scheduled,
            Production,
            Electrical,
            Labor
        }
        
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Multi Node TreePanel built using markup & Code Behind - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            Multi Node TreePanel built using markup & Code Behind</h1>
            <ext:Button ID="Button1" runat="server" OnDirectClick="Select" Text="Select" />
        <br />
        <ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="450" Icon="Lorry"
            Title="Downtimes" AutoScroll="true">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Expand All">
                            <Listeners>
                                <Click Handler="#{TreePanel1}.expandAll();" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button runat="server" Text="Collapse All">
                            <Listeners>
                                <Click Handler="#{TreePanel1}.collapseAll();" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <BottomBar>
                <ext:StatusBar ID="StatusBar1" runat="server" Height="20" AutoClear="1500" />
            </BottomBar>
            <Listeners>
                <ItemClick Handler="if(record.isLeaf()){#{StatusBar1}.setStatus({text: 'Downtime Selected: <b>' + record.data.text + '</b>', clear: false})};" />
                <BeforeSelect Handler="return record.isLeaf();" />
                <AfterRender Handler="#{TreePanel1}.expandAll();" />
            </Listeners>
        </ext:TreePanel>
        </form>
    </body>
    </html>
    Quote Originally Posted by Daniil View Post
    Because there are no Items and no Height. Please add any item or set up Height explicitly.



    Setting up Listeners when a widget is already rendered doesn't affect on client.

    Probably, you have missed the following comment.
  9. #9
    Quote Originally Posted by Fahd View Post
    First issue, I set up the Height explicity but when the Page first loads up, it doesn't show any text in my Status bar because my listener won't get fired until I actually click an item, How can I show the selected item either on Page Load or on a Direct Event ?? I would prefer on a Direct Event.
    Just set up the StatusBar Text property.

    Quote Originally Posted by Fahd View Post
    Secondly, when I try your example from the code below, I get an error:
    Error: "Object reference not set to an instance of an object."

    //TreePanel1.GetSelectionModel().Select(id | index | ModelProxy | etc.); 
    
        protected void Select(object sender, DirectEventArgs e)
        {
            // NOTE: Should highlight 'Power Outage'
            TreePanel1.GetSelectionModel().Select(5);
        }
    Please apply these changes.

    1. Define a SelectionModel for the TreePanel.
    <SelectionModel>
        <ext:TreeSelectionModel runat="server" />
    </SelectionModel>
    2. Add a Delay here:
    TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().getNodeById(6));";
    TreePanel1.Listeners.ViewReady.Delay = 100;
    Because the ViewReady event is fired before you expands nodes here:
    <AfterRender Handler="#{TreePanel1}.expandAll();" />
    Generally, it would be best to select a node within a expandAll callback.
    http://docs.sencha.com/ext-js/4-1/#!...thod-expandAll

    3. Regarding this.
    // NOTE: Should highlight 'Power Outage'
     TreePanel1.GetSelectionModel().Select(5);
    The "Power Outage" node is 2 (zero-based). So, you should call:
    TreePanel1.GetSelectionModel().Select(5);
    to select this node.
    Daniil Veriga
    Developer & Support Expert
  10. #10
    You meant
    TreePanel1.GetSelectionModel().Select(2);
    Anyway it works, but when I call the code above from the DirectEvent, my Status Bar does not get updated with the updated selection.

    Quote Originally Posted by Daniil View Post
    3. Regarding this.
    // NOTE: Should highlight 'Power Outage'
     TreePanel1.GetSelectionModel().Select(5);
    The "Power Outage" node is 2 (zero-based). So, you should call:
    TreePanel1.GetSelectionModel().Select(5);
    to select this node.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] multiselect add item in codebehind
    By albayrak in forum 1.x Premium Help
    Replies: 3
    Last Post: Nov 16, 2011, 10:11 AM
  2. Replies: 2
    Last Post: Sep 04, 2011, 4:51 PM
  3. Replies: 1
    Last Post: Aug 11, 2010, 7:32 PM
  4. Move an Item of Multiselect in codebehind
    By sfvaleriano in forum 1.x Help
    Replies: 0
    Last Post: Sep 14, 2009, 2:52 PM
  5. FormPanel CodeBehind item adding
    By davutengin in forum 1.x Help
    Replies: 0
    Last Post: Jun 15, 2009, 5:53 AM

Tags for this Thread

Posting Permissions

Subscribe now to get the latest Ext.NET happenings in our newsletter.