Table of Contents
  • Getting Started
  • EO.Pdf
  • EO.Web
    • Overview
    • Installation & Deployement
    • EO.Web ToolTip
    • EO.Web Rating
    • EO.Web Slider & RangeSlider
    • EO.Web ListBox
    • EO.Web ComboBox
    • EO.Web Captcha
    • EO.Web ASPX To PDF
    • EO.Web Slide
    • EO.Web Flyout
    • EO.Web EditableLabel
    • EO.Web ImageZoom
    • EO.Web Floater
    • EO.Web Downloader
    • EO.Web ColorPicker
    • EO.Web HTML Editor
    • EO.Web File Explorer
    • EO.Web SpellChecker
    • EO.Web Grid
    • EO.Web MaskedEdit
    • EO.Web Splitter
    • EO.Web Menu
    • EO.Web Slide Menu
    • EO.Web TabStrip
    • EO.Web TreeView
    • EO.Web Calendar
    • EO.Web Callback
    • EO.Web MultiPage
    • EO.Web Dialog
    • EO.Web AJAXUploader
    • EO.Web ProgressBar - Free!
    • EO.Web ToolBar - Free!
  • EO.WebBrowser
  • EO.Wpf
  • Common Topics
  • Reference
Table of Contents
Tree Node Group

Overview

A TreeNodeGroup contains several TreeNodes. Below shows the area of TreeNode and TreeNodeGroup.

The section covers the following topics:

Configure TreeNodeGroup at Design Time

All EO.Web navigation controls have a control builder to support edit-preview function at design time. By default, property grid shows the TreeNode's properties. To configure a tree node's sub group's properties, you can click the Sub Group button on toolbar.

Here's an image of TreeView Builder that allows you to set ExpandEffect property for a sub menu:

Configure TreeNodeGroup at Run Time

You can access group at run time by using TreeNode.SubGroup property. Here is an example to set a TreeNodeGroup's ItemSpacing property to 4 pixels:
Copy 
[C#]
myTreeNode.SubGroup.ItemSpacing = 4;
Copy 
[Visual Basic]
myTreeNode.SubGroup.ItemSpacing = 4

Group & Data Binding

Both the control and the group can be bound to a data source. If the items generated by data binding have the same properties, specify those properties in TemplateItem tag.

CustomItem tag can be embedded inside TemplateItem tag to generate items with nesting controls. Here is an example to define a template item in TreeNodeGroup , each template item contains a text box:

Copy 
[HTML]			
<!-- Control Definition -->
<EO:TreeView id="TreeView1" style= "Z-INDEX: 101; LEFT: 112px; POSITION: absolute; TOP: 48px"
    runat="server" Shortcut="Ctrl+A" Width="280px" NAME="TreeView1">
    <ItemLooks>
        <EO:TreeNode ItemID="Default"></EO.Web:TreeNode>
        <EO:TreeNode ItemID="Separator"></EO.Web:TreeNode>
    </ItemLooks>
    <TopGroup Orientation="Horizontal">
        <TemplateItem>
            <CustomItem>
                <asp:CheckBox Text='<%#((DataRowView)Container.DataItem)["Country"]%>' Runat=server>
                </asp:CheckBox>
            </CustomItem>
            <SubGroup>
                <TemplateItem>
                   <CustomItem>
                        <asp:TextBox Text='<%#((DataRowView)Container.DataItem)["Country"] + " " + ((DataRowView)Container.DataItem)["State"]%>' Runat=server>
                        </asp:TextBox>
                   </CustomItem>
                </TemplateItem>
            </SubGroup>
        </TemplateItem>
    </TopGroup>
</EO:TreeView>

See data binding topic for more details.