Templates

  • 4 min to read

The ASPxTreeList allows you to use any HTML or server-side control as a template for an element inside the tree list to customize that element's appearance and layout.

cdTemplates

Tree List Elements that Support Templates

Element Template Property
Data Cell TreeListTemplates.DataCell
Footer Cell TreeListTemplates.FooterCell
Group Footer Cell TreeListTemplates.GroupFooterCell
Column Header Caption TreeListTemplates.HeaderCaption
Preview TreeListTemplates.Preview

Use the following templates to provide a custom layout for column elements (headers, cells).

Element Template Property
Data Cell TreeListDataColumn.DataCellTemplate
Column Header Caption TreeListColumn.HeaderCaptionTemplate
Footer Cell TreeListColumn.FooterCellTemplate
Group Footer Cell TreeListColumn.GroupFooterCellTemplate

Create a Template

Use the ASPxTreeList.Templates property to access tree list element (data cell, node, filter row, etc.) templates.

Declaratively:

<dx:ASPxTreeList ID="treeList" runat="server" ...>
    <Columns>
        <dx:TreeListDataColumn Caption="Fish Catalog" VisibleIndex="0" AllowSort="False" />
    </Columns>
    <Templates>
        <DataCell>
        ...
        </DataCell>
    </Templates>

</dx:ASPxTreeList>

Programmatically:

<dx:ASPxTreeList ID="ASPxTreeList1" OnInit="ASPxTreeList1_Init" AutoGenerateColumns="False" KeyFieldName="ID" ParentFieldName="ParentID" runat="server">
    <Columns>
        <dx:TreeListTextColumn FieldName="ID" VisibleIndex="0">
        </dx:TreeListTextColumn>
        <dx:TreeListTextColumn FieldName="Name" VisibleIndex="1">
        </dx:TreeListTextColumn>
        <dx:TreeListTextColumn FieldName="Value" VisibleIndex="2">
        </dx:TreeListTextColumn>
    </Columns>
</dx:ASPxTreeList>
protected void Page_Init(object sender, EventArgs e)
{
    List<Person> l = new List<Person>();
    l.Add(new Person() { ID = 0, Name = "Name1", Value = "value1" });
    l.Add(new Person() { ID = 1, Name = "Name2", Value = "value2" });
    ASPxTreeList1.DataSource = l;
    ASPxTreeList1.DataBind();
}

protected void ASPxTreeList1_Init(object sender, EventArgs e)
{
    (ASPxTreeList1.Columns["Value"] as TreeListDataColumn).DataCellTemplate = new MyCellTemplate();
}

public class MyCellTemplate : ITemplate
{
    public void InstantiateIn(Control _container)
    {
        TreeListDataCellTemplateContainer container = _container as TreeListDataCellTemplateContainer;
        object dataValue = DataBinder.Eval(container.DataItem, "Value");
                 ASPxTextBox txt = new ASPxTextBox();
                txt.ID = "txt";
                txt.Text = dataValue.ToString();
                txt.Theme = "Aqua";
                container.Controls.Add(txt);
    }
}

Access Controls Inside Templates

Use methods from the member table to access controls in templates.

Examples

Data Cell Template

This example illustrates how to use the FindDataCellTemplateControl(String, TreeListDataColumn, String) method to find a server control in the ASPxTreeList's data cell template.


C#
ASPX
<dx:ASPxTreeList ID="ASPxTreeList1" runat="server" OnHtmlRowPrepared="ASPxTreeList1_HtmlRowPrepared" ...>
    <Columns>
        <dx:TreeListDataColumn Caption="Products" FieldName="Product" VisibleIndex="0">
            <DataCellTemplate>
            <table cellspacing="0">
                <tr>
                    <td>
                        <dxe:ASPxImage ID="ASPxImage1" runat="server">
                        </dxe:ASPxImage>
                    </td>
                    <td style="vertical-align:middle">
                        <dxe:ASPxLabel ID="ASPxLabel1" runat="server" 
                         Text='<%# Eval("Product") %>'>
                        </dxe:ASPxLabel>
                    </td>
                </tr>
            </table>
            </DataCellTemplate>
        </dx:TreeListDataColumn>
    </Columns>
</dx:ASPxTreeList>
protected void ASPxTreeList1_HtmlRowPrepared(object sender,
DevExpress.Web.ASPxTreeList.TreeListHtmlRowEventArgs e) {
    if(e.RowKind != DevExpress.Web.ASPxTreeList.TreeListRowKind.Data) return;
    ASPxImage img = ASPxTreeList1.FindDataCellTemplateControl(e.NodeKey,
      ASPxTreeList1.Columns["Product"] as TreeListDataColumn, "ASPxImage1") as ASPxImage;
    ASPxLabel lb = ASPxTreeList1.FindDataCellTemplateControl(e.NodeKey,
      ASPxTreeList1.Columns["Product"] as TreeListDataColumn, "ASPxLabel1") as ASPxLabel;
    if (ASPxTreeList1.FindNodeByKeyValue(e.NodeKey).HasChildren) {
        img.ImageUrl = @"~\i\product-group.png";
        lb.Font.Size = 12;
        lb.Font.Bold = true;
    }
    else 
        img.ImageUrl = @"~\i\product.png";
}

Result:

Edit Cell Template

In this sample, the FindEditFormTemplateControl(String) method allows you to find a server control in the edit form template.

<dx:ASPxTreeList ID="treeList" runat="server" onnodevalidating="treeList_NodeValidating" ...>
    <Columns>
    ...
    </Columns>
    <Templates>
        <EditForm>
            <dx:ASPxTextBox ID="tbLastName" runat="server" Width="170px" Text='<%#Bind("LastName") %>'>
            </dx:ASPxTextBox>
            <dx:ASPxTextBox ID="tbFirstName" runat="server" Width="170px" Text='<%#Bind("FirstName") %>'>
            </dx:ASPxTextBox>
            <dx:ASPxTreeListTemplateReplacement ID="ASPxTreeListTemplateReplacement1" runat="server"
                        ReplacementType="UpdateButton" />
            <dx:ASPxTreeListTemplateReplacement ID="ASPxTreeListTemplateReplacement2" runat="server"
                        ReplacementType="CancelButton" />
        </EditForm>
    </Templates>
    <SettingsEditing Mode="EditForm" />
</dx:ASPxTreeList>
protected void treeList_NodeValidating(object sender, TreeListNodeValidationEventArgs e) {
    ASPxTreeList treeList = (ASPxTreeList)sender;
    string lastName = ((ASPxTextBox)treeList.FindEditFormTemplateControl("tbLastName")).Text;
    string firstName = ((ASPxTextBox)treeList.FindEditFormTemplateControl("tbFirstName")).Text;
}

Member Table

Member Description
ASPxTreeList.Templates Provides access to the templates used to display ASPxTreeList elements (cells, column headers, etc.).
ASPxTreeList.FindDataCellTemplateControl Searches for the server control contained within the specified data cell's template.
ASPxTreeList.FindEditCellTemplateControl Searches for the specified server control contained within the specified edit cell's template.
ASPxTreeList.FindFooterTemplateControl Searches for the server control contained within the Footer's template.
ASPxTreeList.FindGroupFooterTemplateControl Searches for the server control contained within the specified group's footer template.
ASPxTreeList.FindHeaderCaptionTemplateControl Searches for the specified server control contained within the column header's caption template.
ASPxTreeList.FindPreviewTemplateControl Searches for the specified server control contained within the specified preview's template.

Task-Based Help

Present Data in Cards

The following example illustrates how to present data in cards:

  • Place a table inside the data cell template to create a card layout.
  • Specify a web control for each data field in a card.
  • Use the Eval() function to get a data field value from a data source.
<dx:ASPxTreeList ID="treeList" runat="server" ...>
    <Templates>
        <DataCell>
            <table class="treeListCard" style="width: 100%">
                <tr>
                    <td rowspan="4" style="width: 10%">
                        <a href="javascript:;" onclick="loadNotes(<%# Eval("ID") %>, this)">
                                <dx:ASPxBinaryImage runat="server" ID="ASPxBinaryImage1" Value='<%# Eval("Picture") %>' /></a>
                    </td>
                    <td class="name">
                        Species No:
                    </td>
                    <td>
                        <dx:ASPxLabel runat="server" Text='<%# Eval("Species_No") %>' />
                    </td>
                    <td class="name">
                        Length:
                    </td>
                    <td>
                        <dx:ASPxLabel runat="server" Text='<%# Eval("Length") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="name">
                        Common Name:
                    </td>
                    <td colspan="3">
                        <dx:ASPxLabel runat="server" Text='<%# Eval("Common_Name") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="name">
                        Species Name:
                    </td>
                    <td colspan="3">
                        <dx:ASPxLabel runat="server" Text='<%# Eval("Species_Name") %>' />
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <a href="javascript:;" onclick="loadNotes(<%# Eval("ID") %>, this)">Show notes...</a>
                    </td>
                </tr>
            </table>
        </DataCell>
    </Templates>
</dx:ASPxTreeList>

Online Demos