What's New?

[CLOSED] TreeGrid: usage

Page 1 of 2 12 LastLast
  1. #1
    Jun 07, 2010, 12:18 PM

    [CLOSED] TreeGrid: usage

    Hello,

    how can I use the treeGrid within a javascript function and specifiy a store as the value of the dataUrl? Or how can I add the column and under Element dynamically within a code behind or javascript function?

    Thanks

    Romuald.
  2. #2
    Jun 07, 2010, 1:42 PM

    RE: [CLOSED] TreeGrid: usage



    Is it possible to do something like this? What are the configuration options?

    


var Col1 = new Ext.Net.TreeGridColumn({


    Header: "task",


    Width: "230", 


    DataIndex: "task"


});


var phaseGrid = new Ext.net.TreeGrid({


    id: 'phaseGrid',


    runat: 'server',


    height: 150,


    width: 310,


    store: '',


    Columns: [Col1]


});
  3. #3
    Jun 07, 2010, 5:19 PM

    RE: [CLOSED] TreeGrid: usage

    Hi,

    Unfortunately, that extension (TreeGrid) doesn't support adding/removing columns after TreeGrid rendering
    I can suggest to rerender TreeGrid
    <%@ Page Language="C#" %>

<%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
    <title>TreeGrid - Ext.NET Examples</title>
    
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
        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");
            }
        };
    </script>
    
    <script runat="server">
        protected void AddColumnClick(object sender, DirectEventArgs e)
        {
            TreeGrid1.Columns.Add(new TreeGridColumn { Header = "Assigned To", Width = 150, DataIndex = "User" });
            TreeGrid1.Render(TreeGrid1.ContainerID, RenderMode.RenderTo);
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <h1>TreeGrid</h1>
        
        <ext:TreeGrid 
            ID="TreeGrid1"
            runat="server"
            Title="Core Team Projects"
            Width="500"
            Height="300"
            NoLeafIcon="true"
            EnableDD="true">
            <Columns>
                <ext:TreeGridColumn Header="Task" Width="230" DataIndex="Task" />
                
                <ext:TreeGridColumn Header="Duration" Width="100" DataIndex="Duration" Align="Center" SortType="AsFloat">
                    <XTemplate runat="server">
                        <Html>
                            {Duration:this.formatHours}
                        </Html>
                        <Functions>
                            <ext:JFunction Name="formatHours" Fn="formatHours" />
                        </Functions>
                    </XTemplate>
                </ext:TreeGridColumn>
               
            </Columns>
            
            <Root>
                <ext:TreeNode Text="Tasks">
                    <Nodes>
                        <ext:TreeNode 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>
                            
                            <Nodes>
                                <ext:TreeNode 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>
                                    
                                    <Nodes>
                                        <ext:TreeNode 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:TreeNode>
                                        
                                        <ext:TreeNode 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" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                        
                                        <ext:TreeNode 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:TreeNode>
                                        
                                        <ext:TreeNode 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:TreeNode>
                                    </Nodes>
                                </ext:TreeNode>
                                
                                <ext:TreeNode 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>
                                    
                                    <Nodes>
                                        <ext:TreeNode 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:TreeNode>
                                        
                                        <ext:TreeNode 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>
                                            
                                            <Nodes>
                                                <ext:TreeNode 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:TreeNode>
                                                
                                                <ext:TreeNode 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:TreeNode>
                                            </Nodes>
                                        </ext:TreeNode>
                                        
                                        <ext:TreeNode 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" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                        
                                        <ext:TreeNode 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" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                        
                                        <ext:TreeNode 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:TreeNode>
                                    </Nodes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                        
                        <ext:TreeNode 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>
                            
                            <Nodes>
                                <ext:TreeNode 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>
                                    
                                    <Nodes>
                                        <ext:TreeNode 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:TreeNode>
                                        
                                        <ext:TreeNode 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:TreeNode>
                                        
                                        <ext:TreeNode 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:TreeNode>
                                    </Nodes>
                                </ext:TreeNode>
                                
                                <ext:TreeNode 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>
                                    
                                    <Nodes>
                                        <ext:TreeNode 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:TreeNode>
                                        
                                        <ext:TreeNode 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:TreeNode>
                                        
                                        <ext:TreeNode 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:TreeNode>
                                        
                                        <ext:TreeNode 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:TreeNode>
                                    </Nodes>
                                </ext:TreeNode>
                                
                                <ext:TreeNode 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>
                                    
                                    <Nodes>
                                        <ext:TreeNode 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:TreeNode>
                                        
                                        <ext:TreeNode 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:TreeNode>
                                    </Nodes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
        </ext:TreeGrid>   
        
        <ext:Button runat="server" Text="Add column">
            <DirectEvents>
                <Click OnEvent="AddColumnClick" />
            </DirectEvents>
        </ext:Button>     
    </form>
</body>
</html>
  4. #4
    Jun 07, 2010, 6:29 PM

    RE: [CLOSED] TreeGrid: usage

    Thanks for your reply.

    Is it not possible to create a treeGrid object with Javascript like

    var tree = new Ext.Net.TreeGrid({}) and specify the options which I want to use within the brackets

    and use the created object als Item in an Ext.windows?

    Romuald.

  5. #5
    Jun 07, 2010, 6:45 PM

    RE: [CLOSED] TreeGrid: usage

    Hi,

    Yes, it is possible
    var tree = new Ext.ux.tree.TreeGrid({
    id: "TreeGrid1",
    height: 300,
    width: 500,
    title: "Core Team Projects",
    enableDD: true,
    nodes: [{
        text: "Tasks",
        children: [{
            expanded: true,
            iconCls: "icon-folder",
            task: "Project: Shopping",
            duration: 13.25,
            user: "Tommy Maintz",
            children: [{
                iconCls: "icon-folder",
                task: "Housewares",
                duration: 1.25,
                user: "Tommy Maintz",
                children: [{
                    leaf: true,
                    task: "Kitchen supplies",
                    duration: 0.25,
                    user: "Tommy Maintz"
                }, {
                    leaf: true,
                    task: "Groceries",
                    duration: 0.4,
                    user: "Tommy Maintz"
                }, {
                    leaf: true,
                    task: "Cleaning supplies",
                    duration: 0.4,
                    user: "Tommy Maintz"
                }, {
                    leaf: true,
                    task: "Office supplies",
                    duration: 0.2,
                    user: "Tommy Maintz"
                }]
            }, {
                expanded: true,
                iconCls: "icon-folder",
                task: "Remodeling",
                duration: 12,
                user: "Tommy Maintz",
                children: [{
                    leaf: true,
                    task: "Retile kitchen",
                    duration: 6.5,
                    user: "Tommy Maintz"
                }, {
                    iconCls: "icon-folder",
                    task: "Paint bedroom",
                    duration: 2.75,
                    user: "Tommy Maintz",
                    children: [{
                        leaf: true,
                        task: "Ceiling",
                        duration: 1.25,
                        user: "Tommy Maintz"
                    }, {
                        leaf: true,
                        task: "Walls",
                        duration: 1.5,
                        user: "Tommy Maintz"
                    }]
                }, {
                    leaf: true,
                    task: "Decorate living room",
                    duration: 2.75,
                    user: "Tommy Maintz"
                }, {
                    leaf: true,
                    task: "Fix lights",
                    duration: 0.75,
                    user: "Tommy Maintz"
                }, {
                    leaf: true,
                    task: "Reattach screen door",
                    duration: 2,
                    user: "Tommy Maintz"
                }]
            }]
        }, {
            iconCls: "icon-folder",
            task: "Project: Testing",
            duration: 2,
            user: "Core Team",
            children: [{
                iconCls: "icon-folder",
                task: "Mac OSX",
                duration: 0.75,
                user: "Tommy Maintz",
                children: [{
                    leaf: true,
                    task: "FireFox",
                    duration: 0.25,
                    user: "Tommy Maintz"
                }, {
                    leaf: true,
                    task: "Safari",
                    duration: 0.25,
                    user: "Tommy Maintz"
                }, {
                    leaf: true,
                    task: "Chrome",
                    duration: 0.25,
                    user: "Tommy Maintz"
                }]
            }, {
                iconCls: "icon-folder",
                task: "Windows",
                duration: 3.75,
                user: "Darrell Meyer",
                children: [{
                    leaf: true,
                    task: "FireFox",
                    duration: 0.25,
                    user: "Darrell Meyer"
                }, {
                    leaf: true,
                    task: "Safari",
                    duration: 0.25,
                    user: "Darrell Meyer"
                }, {
                    leaf: true,
                    task: "Chrome",
                    duration: 0.25,
                    user: "Darrell Meyer"
                }, {
                    leaf: true,
                    task: "Internet Explorer",
                    duration: 3,
                    user: "Darrell Meyer"
                }]
            }, {
                iconCls: "icon-folder",
                task: "Linux",
                duration: 0.5,
                user: "Aaron Conran",
                children: [{
                    leaf: true,
                    task: "FireFox",
                    duration: 0.25,
                    user: "Aaron Conran"
                }, {
                    leaf: true,
                    task: "Chrome",
                    duration: 0.25,
                    user: "Aaron Conran"
                }]
            }]
        }]
    }],
    columns: [{
        dataIndex: "task",
        header: "task",
        width: 230.0
    }, {
        align: "center",
        dataIndex: "duration",
        header: "duration",
        tpl: this.ctl05 = new Ext.net.XTemplate({
            proxyId: "ctl05",
            functions: {
                formatHours: formatHours
            }, html: ["{duration:this.formatHours}", ""]
        }),
        width: 100.0,
        sortType: "asFloat"
    }, {
        dataIndex: "user",
        header: "Assigned To",
        width: 150.0
    }],
    noLeafIcon: true
});

Window1.add(tree);
Window1.doLayout();
  6. #6
    Jun 08, 2010, 4:50 PM

    RE: [CLOSED] TreeGrid: usage

    Hello,

    I try the in the previous answer provided example but I get the following error. Ext.ux.tree.TreeGrid has a null value or is not an object.

    What I have done is following. I packed the example (without the following 2 last lines:
    Window1.add(tree);
    Window1.doLayout();) within a function, which I call after a button is clicked.

    Thanks

    Romuald.
  7. #7
    Jun 08, 2010, 5:00 PM

    RE: [CLOSED] TreeGrid: usage

    Hi,

    TreeGrid requires additional resources. If you do not add tree grid as server side control then please add the following code to the Page_Load


    ResourceManager.RegisterControlResources<TreeGrid>();
  8. #8
    Jun 08, 2010, 5:21 PM

    RE: [CLOSED] TreeGrid: usage

    Thank you for your reply.

    Unfortunatly I get another error which occurs when call the initColumns function of the treeGrid's implementation.

    The error message is: length has a null value or is not an object.

    I think I have to specifiy it in the options but how can I do it?

    Romuald.
  9. #9
    Jun 08, 2010, 5:25 PM

    RE: [CLOSED] TreeGrid: usage

    Hi,

    Did you define columns? Please provide test sample
  10. #10
    Jun 08, 2010, 5:34 PM

    RE: [CLOSED] TreeGrid: usage

    Here is my simplified version of the example.

    


var tree = new Ext.ux.tree.TreeGrid({


id: "TreeGrid1",


height: 300,


width: 500,


title: "Core Team Projects",


enableDD: true,


nodes: [{


text: "Tasks",


children: [{


expanded: true,


iconCls: "icon-folder",


task: "Project: Shopping",


duration: 13.25,


user: "Tommy Maintz",


children: [{


iconCls: "icon-folder",


task: "Housewares",


duration: 1.25,


user: "Tommy Maintz",


children: [{


leaf: true,


task: "Kitchen supplies",


duration: 0.25,


user: "Tommy Maintz"},


{leaf: true,


task: "Groceries",


duration: 0.4,


user: "Tommy Maintz"


},


{


leaf: true,


task: "Cleaning supplies",


duration: 0.4,


user: "Tommy Maintz"


}, {


leaf: true,


task: "Office supplies",


duration: 0.2,


user: "Tommy Maintz"


}]


},{


leaf: true,


task: "Chrome",


duration: 0.25,


user: "Aaron Conran"


}]


}]


}],





noLeafIcon: true


});


    Romuald
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] GridPanel usage
    By alliedwallet.com in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 12, 2011, 8:10 AM
  2. Licence (CMS/CRM usage)
    By pentijum in forum Licensing
    Replies: 1
    Last Post: May 02, 2011, 5:28 AM
  3. [CLOSED] [1.0] RadioGroup usage help
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 05, 2010, 7:15 PM
  4. [CLOSED] DataView: usage
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 12, 2010, 8:46 PM
  5. [CLOSED] TreeGrid: Header width when treegrid is flexible
    By wazige in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 06, 2010, 10:44 AM

Posting Permissions