Source view of TREEVIEW.ASPX
DotNet Funda: Code Viewer
treeview.aspx | treeview.aspx.cs
Close Window  
<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
    <table width="100%" cellpadding="2" cellspacing="0">
        <tr valign="top" class="ArticleTitle">
            <td style="padding-left:10px;" valign="middle">
                asp:TreeView control</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                The TreeView control is the most impressing new control in ASP.NET 2.0. It is used to display the hierarchical data in tree view format. 
                It also supports dynamic population of the node on demand without page refresh.
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
    <div class="ArticleContents">
        The TreeView control is the most impressing new control in ASP.NET 2.0. It is used to display the hierarchical data in tree view format. 
        It also supports dynamic population of the node on demand without page refresh.
        <br />
        When TreeView is displayed for the first time, it displays all its nodes. However, it can be controlled by setting <span class="DemoCP">ExpandDepth</span> property.
        <p>
            Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
            are implemented through style properites of &lt;table, tr, td/&gt; tag. 
        </p>
                
        Following are some important properties that are very useful.
        <table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
            <tr>
                <th colspan="2" align="left">Properties of TreeView Control</th>
            </tr>
            <tr>
                <td class="DemoCP">DataSourceID</td>
                <td>
                    Indicates the data source to be used (You can use .sitemap file as datasource).
                </td>
            </tr>
            <tr>
                <td class="DemoCP">Text</td>
                <td>
                    Indicates the text to display in the node.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">Tooltip</td>
                <td>
                    Indicates the tooltip of the node when you mouse over.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">Value</td>
                <td>
                    Indicates the nondisplayed value (usually unique id to use in server side events)
                </td>
            </tr>
            <tr valign="top">
                <td class="DemoCP">NavigateUrl</td>
                <td>
                    Indicates the target location to send to the user when node is clicked. If not set you can handle TreeView.SelectedNodeChanged event to decide what to do.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">Target</td>
                <td>
                    If <span class="DemoCP">NavigationUrl</span> property is set, it indicates where to open the target location (in new window or same window).
                </td>
            </tr>
            <tr>
                <td class="DemoCP">ImageUrl</td>
                <td>
                    Indicates the image that appears next to the node.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">ImageToolTip</td>
                <td>
                    Indicates the tooltip text to display for image next to the node.
                </td>
            </tr>
           <tr>
                <th colspan="2" align="left">Styles of TreeView Control</th>
            </tr>
            <tr>
                <td class="DemoCP">NodeSpacing</td>
                <td>
                    Space (in pixel) between current node and the node above or below it.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">VerticalPadding</td>
                <td>
                    Space (in pixel) between the top and bottom of the node text.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">HorizontalPadding</td>
                <td>
                    Space (in pixel) between the left and right of the node text.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">ChildNodePadding</td>
                <td>
                    Space (in pixel) between the parent node and its child node.
                </td>
            </tr>
        </table>
        <!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle">
                    DEMO : TreeView
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/treeview.aspx" target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr>
                <td>
                    
                    <asp:TreeView ID="TreeView1" runat="Server" DataSourceID="SiteMapDataSource1" ImageSet="Simple"
                         ExpandDepth="1">
                        <ParentNodeStyle Font-Bold="False" />
                        <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
                        <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
                            VerticalPadding="0px" />
                        <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="0px"
                            NodeSpacing="0px" VerticalPadding="0px" />
                    </asp:TreeView>
                    
                    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="Server" />
                                        
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <!-- START - Server Side Code -->
                    <pre>                    
// TreeView Control ////////////////////////////          
&lt;asp:TreeView ID="TreeView1" runat="Server" DataSourceID="SiteMapDataSource1" ImageSet="Simple"
             ExpandDepth="1"&gt;
            &lt;ParentNodeStyle Font-Bold="False" /&gt;
            &lt;HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" /&gt;
            &lt;SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
                VerticalPadding="0px" /&gt;
            &lt;NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="0px"
                NodeSpacing="0px" VerticalPadding="0px" /&gt;
        &lt;/asp:TreeView&gt;


// SiteMapDataSource Control ////////////////////////////          
        &lt;asp:SiteMapDataSource ID="SiteMapDataSource1" runat="Server" /&gt;


                    </pre> 
                    <!-- END - Server Side Code -->
                </td>
            </tr>
        </table>
        <!-- END - Demo Section -->
        </div>
    <br />
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>

Go Top