[CLOSED] How to show the borders for the Tree Panel?

  1. #1

    [CLOSED] How to show the borders for the Tree Panel?

    Hi,

    How can i show the broder in this tree panel Click image for larger version. 

Name:	border tree grid.png 
Views:	36 
Size:	10.6 KB 
ID:	5884as shown in the image?

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>TreeGrid - Ext.NET Examples</title>
        
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <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'));
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>
                TreeGrid Example
            </h1>
            <p>
                This example is an advanced tree example. It illustrates:
            </p>
            <ul class="feature-list">
                <li>Multiple headers
                </li>            
                <li>Header hiding, showing, reordering and resizing
                </li>
                <li>useArrows configuration
                </li>
                <li>Keyboard Navigation
                </li>
                <li>Discontinguous selection by holding the CTRL key
                </li>            
                <li>singleExpand has been set to true
                </li>
            </ul>
    
            <br />
    
            <ext:TreePanel 
                runat="server"
                Title="Core Team Projects"
                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>
                
                <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>
    Last edited by Daniil; Mar 26, 2013 at 4:20 AM. Reason: [CLOSED]
  2. #2
    Hi @sailendra,

    Please set up these settings for the TreePanel.
    ColumnLines="true"
    RowLines="true"
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @sailendra,

    Please set up these settings for the TreePanel.
    ColumnLines="true"
    RowLines="true"
    After setting the above settings also, border is not being shown in Tree Panel


    Regards
    Sailendra
  4. #4
    There was such a bug in the v2.1 release, but fixed in the SVN trunk.

    Please update or try to use:
    XColumnLines="true"
    XRowLines="true"

Similar Threads

  1. Replies: 1
    Last Post: Oct 26, 2012, 8:52 AM
  2. Tree Grid - Doesn't show child nodes be default.
    By Sagar2529 in forum 1.x Help
    Replies: 3
    Last Post: Feb 25, 2011, 9:13 AM
  3. Replies: 4
    Last Post: Apr 08, 2010, 8:05 PM
  4. [CLOSED] TextField does not show the red borders for a required field.
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 16, 2010, 12:03 PM
  5. Replies: 1
    Last Post: Jan 23, 2009, 6:43 AM

Tags for this Thread

Posting Permissions