[CLOSED] TreePanel inside dropdown

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] TreePanel inside dropdown

    In the example
    https://examples1.ext.net/#/Form/Dro...ield/Overview/
    for the treepanel into the dropdownlist, how could i retrieve the checked treepanel nodes from the treepanel in the click directevent of a button?
  2. #2
    Hi Pablo,

    Please look at the example demonstrating how to achieve your requirement.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void GetCheckedNodes(object sender, DirectEventArgs e)
        {
            X.MessageBox.Alert("DirectEvent", e.ExtraParams["checkedNodes"]).Show();
        }
    </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 runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TreePanel 
            ID="TreePanel1" 
            runat="server" 
            Height="300" 
            Width="300">
            <Root>
                <ext:TreeNode Text="Composers" Expanded="true" Checked="True">
                    <Nodes>
                        <ext:TreeNode Text="Beethoven" Expanded="true" Checked="True">
                            <Nodes>
                                <ext:TreeNode Text="Concertos" Expanded="true" Checked="True">
                                    <Nodes>
                                        <ext:TreeNode Text="Concert 1" Checked="True" />
                                        <ext:TreeNode Text="Concert 2" Checked="True" />
                                    </Nodes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
            <Buttons>
                <ext:Button runat="server" Text="Get checked nodes">
                    <DirectEvents>
                        <Click OnEvent="GetCheckedNodes">
                            <ExtraParams>
                                <ext:Parameter 
                                    Name="checkedNodes" 
                                    Value="#{TreePanel1}.getChecked('text')" 
                                    Mode="Raw" 
                                    Encode="true"/>
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>
        </ext:TreePanel>
        </form>
    </body>
    </html>
    See also
    http://dev.sencha.com/deploy/dev/doc...ber=getChecked
  3. #3
    Also you could use the TreePanel's .CheckedNodes collection (on server side) instead of DirectEvent's extra parameter.
  4. #4
    Thanks. CheckedNodes did it. And how do i uncheck all nodes on the server? Tried clearing CheckedNodes but didn't work. I couldn't figure out how to check nodes on server either setting treenode checked property to true won't do it...
  5. #5
    Hi Pablo,

    It can looks like this:

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void UncheckAll(object sender, DirectEventArgs e)
        {
            TreePanel1.AddScript(TreePanel1.ClientID + ".getRootNode().cascade(function(node) {node.ui.toggleCheck(false);});");
        }
    </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 runat="server">
        <title>Ext.Net Example</title>
        <script type="text/javascript">
            var uncheckAll = function(node) {
                node.ui.toggleCheck(false);   
            }
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TreePanel
            ID="TreePanel1"
            runat="server"
            Height="300"
            Width="300">
            <Root>
                <ext:TreeNode Text="Composers" Expanded="true" Checked="True">
                    <Nodes>
                        <ext:TreeNode Text="Beethoven" Expanded="true" Checked="True">
                            <Nodes>
                                <ext:TreeNode Text="Concertos" Expanded="true" Checked="True">
                                    <Nodes>
                                        <ext:TreeNode Text="Concert 1" Checked="True" />
                                        <ext:TreeNode Text="Concert 2" Checked="True" />
                                    </Nodes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
            <Buttons>
                <ext:Button runat="server" Text="Uncheck all">
                    <DirectEvents>
                        <Click OnEvent="UncheckAll" />
                    </DirectEvents>
                </ext:Button>
            </Buttons>
        </ext:TreePanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Oct 06, 2010 at 2:25 PM.
  6. #6
    Oh, there is the clearChecked() method for this purpose.

    Please use just
    TreePanel1.Call("clearChecked");
  7. #7
    In both examples it gives me a javascript error saying TreePanel1 is not found. That's strange, becase i explicitly set the id...
    What about checking particular nodes, how can that be done in the server?
  8. #8
    Do you use a master page? Could you provide a sample code?

    To check or uncheck particular node please use:

    TreePanel1.ToggleCheck(nodeId, true/false)
  9. #9
    Hi,

    If you place a component to the DropDownField then component will be create when drop down field is focused. You can change that behaviour by setting the following property for DropDownField
    LazyInit="false"
  10. #10
    LazyInit worked. Now there is a new issue: If i check some nodes in the server using the method Daniil suggested, only the nodes that are directly in the root get checked. The others only get checked after i have viewed the treepanel once.

    Look at this example:
    <%@ Page Language="C#" AutoEventWireup="true"%>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        protected override void OnLoad(EventArgs e)
        {
            btDirectEvent.DirectEvents.Click.Event += new ComponentDirectEvent.DirectEventHandler(Click_Event);
    
            base.OnLoad(e);
        }
        private void LoadStuff()
        {
            tpDashboard.ToggleCheck("600003_CON", true);
            tpDashboard.ToggleCheck("600004_CON", true);
            tpDashboard.ToggleCheck("600005_CON", true);
            tpDashboard.ToggleCheck("600002_CON", true);
            tpDashboard.ToggleCheck("600002_DFN", true);
            tpDashboard.ToggleCheck("600002_DCL", true);
            tpDashboard.ToggleCheck("600002_DEM", true);
            tpDashboard.ToggleCheck("600002_DFO", true);
        }
        void Click_Event(object sender, DirectEventArgs e)
        {
            LoadStuff();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <ext:Button runat="server" ID="btDirectEvent"></ext:Button>
            <ext:ResourceManager ID="ResourceManager" runat="server" />
        <ext:DropDownField ID="dfDashboard" runat="server" Editable="false" Width="300" TriggerIcon="SimpleArrowDown"
                                    FieldLabel="Dashboard" LazyInit="false">
                                    <Component>
                                        <ext:TreePanel ID="tpDashboard" runat="server" Title="Itens Dashboard" Icon="Accept"
                                            Height="220" Shadow="None" UseArrows="true" AutoScroll="true" Animate="true"
                                            EnableDD="true" ContainerScroll="true" RootVisible="false">
                                            <SelectionModel>
                                            <ext:DefaultSelectionModel ID="DefaultSelectionModel1" runat="server"></ext:DefaultSelectionModel>
                                            </SelectionModel>
                                            <Root>
                                           
                                                <ext:TreeNode>
                                                    <Nodes>
                                                        <ext:TreeNode NodeID="600003_CON" Text="Documentos" Icon="FolderTable" Checked="False"
                                                            Leaf="true" />
                                                        <ext:TreeNode NodeID="600004_CON" Text="Tarefas" Icon="ClockEdit" Checked="False"
                                                            Leaf="true" />
                                                        <ext:TreeNode NodeID="600005_CON" Text="Informações" Icon="Rss" Checked="False" Leaf="true" />
                                                        <ext:TreeNode NodeID="600002_CON" Text="Busca" Leaf="false" Icon="Zoom">
                                                            <Nodes>
                                                                <ext:TreeNode NodeID="600002_DFN" Text="Função" Leaf="true" Checked="False" />
                                                                <ext:TreeNode NodeID="600002_DCL" Text="Cliente" Leaf="true" Checked="False" />
                                                                <ext:TreeNode NodeID="600002_DEM" Text="Empresa" Leaf="true" Checked="False" />
                                                                <ext:TreeNode NodeID="600002_DFO" Text="Fornecedor" Leaf="true" Checked="False" />
                                                            </Nodes>
                                                        </ext:TreeNode>
                                                    </Nodes>
                                                </ext:TreeNode>
                                            </Root>
                                        </ext:TreePanel>
                                    </Component>
                                    <Listeners>
                                        <Expand Handler="this.component.getRootNode().expand(true);" Single="true" Delay="10" />
                                    </Listeners>
                                </ext:DropDownField>
         
        </div>
        </form>
    </body>
    </html>
    No mather how many times you click the button, the subnodes inside "Busca" (600002_CON) only get checked after you view the treepanel once.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Editable check column inside a TreePanel
    By RCN in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 04, 2012, 9:07 AM
  2. Replies: 6
    Last Post: Jan 28, 2012, 1:14 AM
  3. Replies: 2
    Last Post: May 14, 2011, 6:29 PM
  4. Replies: 6
    Last Post: Feb 08, 2011, 6:17 PM
  5. [CLOSED] Lazy Mode | Dropdown Field | Treepanel Instance
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 18, 2010, 3:52 PM

Posting Permissions