What's New?

[CLOSED] filter tree panel data using combo box like Quick Search

  1. #1
    May 18, 2013, 6:01 PM

    [CLOSED] filter tree panel data using combo box like Quick Search

    filter tree panel data using combo box
    and show it on top row expanded like i type & select text in combobox ,select text showld be selected in treepanel and show at top in the rows .
    Last edited by Daniil; May 28, 2013 at 4:13 AM. Reason: [CLOSED]
  2. #2
    May 19, 2013, 9:29 PM
    Hello!

    Quote Originally Posted by UT007 View Post
    filter tree panel data using combo box
    You should use filterBy method which can be called for TreePanel too: http://docs.sencha.com/extjs/4.2.0/#...ethod-filterBy

    Quote Originally Posted by UT007 View Post
    and show it on top row expanded like i type & select text in combobox ,select text showld be selected in treepanel and show at top in the rows .
    Sorry, but I don't quite understand these requirements. Can you provide more details or a picture of required functionality: http://forums.ext.net/showthread.php?10205
  3. #3
    May 20, 2013, 3:00 PM

    filter tree panel data using combo box like Quick Search

    i need LiveSearch in treepanel(https://examples2.ext.net/#/TreePane...nced/TreeGrid/) like (https://examples2.ext.net/#/GridPane...ns/LiveSearch/ ).
  4. #4
    May 20, 2013, 10:41 PM
    Unfortunately, we don't have this functionality for TreePanel. However, there is an example which you can use to start:

    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET Examples</title>
    
    <script>
        var formatHours = function (v) {
            if (v < 1) {
                return Math.round(v * 60) + " mins";
            } else if (Math.floor(v) !== v) {
                var min = v - Math.floor(v);
                return Math.floor(v) + "h " + Math.round(min * 60) + "m";
            } else {
                return v + " hour" + (v === 1 ? "" : "s");
            }
        };

        var handler = function (grid, rowIndex, colIndex, actionItem, event, record, row) {
            Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : ''), record.get('task'));
        };
        
        var searchInTreePanel = function(field) {
            var tree = field.treePanel;
            text = field.getRawValue();

            if (Ext.isEmpty(text, false)) {
                tree.clearFilter(true);
            }

            if (Ext.isEmpty(text, false)) {
                return;
            }

            var re = new RegExp(".*" + text + ".*", "i");

            tree.clearFilter(true);

            tree.filterBy(function (node) {
                var match = re.test(node.data.task),
                    pn = node.parentNode;

                if (match && node.isLeaf()) {
                    pn.hasMatchNode = true;
                }

                if (pn != null && pn.fixed) {
                    if (node.isLeaf() === false) {
                        node.fixed = true;
                    }
                    return true;
                }

                if (node.isLeaf() === false) {
                    node.fixed = match;
                    return match;
                }

                return (pn != null && pn.fixed) || match;
            }, { expandNodes: true });

            tree.getView().animate = false;
            tree.getRootNode().cascadeBy(function (node) {
                if (node.isRoot()) {
                    return;
                }

                if ((node.getDepth() === 1) ||
                    (node.getDepth() === 2 && node.hasMatchNode)) {
                    node.expand(false);
                }

                delete node.fixed;
                delete node.hasMatchNode;
            }, tree);
            tree.getView().animate = true;
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" SourceFormatting="True" />

        <ext:TreePanel 
            runat="server"
            ID="TreePanel1"
            Width="500"
            Height="300"
            Collapsible="true"
            UseArrows="true"
            RootVisible="false"
            MultiSelect="true"
            SingleExpand="true"
            FolderSort="true">
            <Fields>
                <ext:ModelField Name="task" />
                <ext:ModelField Name="user" />
                <ext:ModelField Name="duration" />
                <ext:ModelField Name="done" Type="Boolean" />
            </Fields>
            <ColumnModel>
                <Columns>
                    <ext:TreeColumn 
                        runat="server"
                        Text="Task" 
                        Flex="2" 
                        Sortable="true"
                        DataIndex="task" />
                    <ext:TemplateColumn 
                        runat="server"
                        Text="Duration" 
                        Flex="1"
                        Sortable="true" 
                        DataIndex="duration" 
                        Align="Center">                        
                        <Template runat="server">
                            <Html>
                                {duration:this.formatHours}
                            </Html>
                            <Functions>
                                <ext:JFunction Name="formatHours" Fn="formatHours" />
                            </Functions>
                        </Template>
                    </ext:TemplateColumn>
                    <ext:Column 
                        runat="server"
                        Text="Assigned To" 
                        Flex="1" 
                        Sortable="true"
                        DataIndex="user" />
                    <ext:CheckColumn runat="server" 
                       Text="Done"
                       DataIndex="done"
                       Width="40"
                       Editable="true"
                       StopSelection="false" />
                    <ext:ActionColumn runat="server" 
                        Text="Edit"
                        Width="40"
                        MenuDisabled="true"
                        Align="Center">
                        <Items>
                            <ext:ActionItem Tooltip="Edit task" Icon="PageWhiteEdit" Handler="handler">
                                <IsDisabled Handler="return !record.data.leaf;" />
                            </ext:ActionItem>
                        </Items>    
                    </ext:ActionColumn>
                </Columns>    

            </ColumnModel>
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:TextField runat="server" HideLabel="True" Width="200" SubmitValue="False">
                            <Listeners>
                                <Change Fn="searchInTreePanel" Buffer="500"></Change>
                                <AfterRender Handler="this.treePanel = this.up('treepanel');"></AfterRender>
                            </Listeners>
                        </ext:TextField>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Root>
                <ext:Node Text="Tasks">
                    <Children>
                        <ext:Node Icon="Folder" Expanded="true">
                            <CustomAttributes>
                                <ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" />
                                <ext:ConfigItem Name="duration" Value="13.25" />
                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                            </CustomAttributes>
                            <Children>
                                <ext:Node Icon="Folder">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="task" Value="Housewares" Mode="Value" />
                                        <ext:ConfigItem Name="duration" Value="1.25" />
                                        <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                    </CustomAttributes>
                                    <Children>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Kitchen supplies" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.25" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Groceries" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.4" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                <ext:ConfigItem Name="done" Value="true" Mode="Raw" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Cleaning supplies" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.4" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Office supplies" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.2" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                    </Children>
                                </ext:Node>
                                <ext:Node Icon="Folder" Expanded="true">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="task" Value="Remodeling" Mode="Value" />
                                        <ext:ConfigItem Name="duration" Value="12" />
                                        <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                    </CustomAttributes>
                                    <Children>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Retile kitchen" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="6.5" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Icon="Folder">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Paint bedroom" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="2.75" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                            </CustomAttributes>
                                            <Children>
                                                <ext:Node Leaf="true">
                                                    <CustomAttributes>
                                                        <ext:ConfigItem Name="task" Value="Ceiling" Mode="Value" />
                                                        <ext:ConfigItem Name="duration" Value="1.25" />
                                                        <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                    </CustomAttributes>
                                                </ext:Node>
                                                <ext:Node Leaf="true">
                                                    <CustomAttributes>
                                                        <ext:ConfigItem Name="task" Value="Walls" Mode="Value" />
                                                        <ext:ConfigItem Name="duration" Value="1.5" />
                                                        <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                    </CustomAttributes>
                                                </ext:Node>
                                            </Children>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Decorate living room" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="2.75" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                <ext:ConfigItem Name="done" Value="true" Mode="Raw" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Fix lights" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.75" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                <ext:ConfigItem Name="done" Value="true" Mode="Raw" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Reattach screen door" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="2" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                    </Children>
                                </ext:Node>
                            </Children>
                        </ext:Node>
                        <ext:Node Icon="Folder">
                            <CustomAttributes>
                                <ext:ConfigItem Name="task" Value="Project: Testing" Mode="Value" />
                                <ext:ConfigItem Name="duration" Value="2" />
                                <ext:ConfigItem Name="user" Value="Core Team" Mode="Value" />
                            </CustomAttributes>
                            <Children>
                                <ext:Node Icon="Folder">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="task" Value="Mac OSX" Mode="Value" />
                                        <ext:ConfigItem Name="duration" Value="0.75" />
                                        <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                    </CustomAttributes>
                                    <Children>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="FireFox" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.25" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Safari" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.25" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Chrome" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.25" />
                                                <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                    </Children>
                                </ext:Node>
                                <ext:Node Icon="Folder">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="task" Value="Windows" Mode="Value" />
                                        <ext:ConfigItem Name="duration" Value="3.75" />
                                        <ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
                                    </CustomAttributes>
                                    <Children>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="FireFox" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.25" />
                                                <ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Safari" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.25" />
                                                <ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Chrome" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.25" />
                                                <ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Internet Explorer" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="3" />
                                                <ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                    </Children>
                                </ext:Node>
                                <ext:Node Icon="Folder">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="task" Value="Linux" Mode="Value" />
                                        <ext:ConfigItem Name="duration" Value="0.5" />
                                        <ext:ConfigItem Name="user" Value="Aaron Conran" Mode="Value" />
                                    </CustomAttributes>
                                    <Children>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="FireFox" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.25" />
                                                <ext:ConfigItem Name="user" Value="Aaron Conran" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Chrome" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.25" />
                                                <ext:ConfigItem Name="user" Value="Aaron Conran" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                    </Children>
                                </ext:Node>
                            </Children>
                        </ext:Node>
                    </Children>
                </ext:Node>
            </Root>
        </ext:TreePanel>        
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] [#111] How to filter combo box data using the text that exists in the middle
    By sailendra in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 14, 2013, 11:55 AM
  2. [CLOSED] Syntax to get grid panel row index to filter comboBox data inside grid panel
    By alscg in forum 2.x Legacy Premium Help
    Replies: 13
    Last Post: Feb 28, 2013, 2:06 PM
  3. Tree Panel Advanced Filter
    By dan182 in forum 1.x Help
    Replies: 4
    Last Post: Oct 10, 2011, 10:45 AM
  4. combo box inside a grid panel (data depends on row values)
    By anand in forum 1.x Help
    Replies: 3
    Last Post: Aug 10, 2011, 2:00 PM
  5. [CLOSED] Grid Panel Filter and Sorting futures for Large data
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 16, 2010, 7:50 PM

Tags for this Thread

Posting Permissions