Edit this page

HTML Output

RadTreeList is designed to display tabular data in a table-based layout. The HTML output of the control looks like this:

<div class="RadTreeList RadTreeList_Default">
    <table class="rtlTable rtlHVBorders rtlHBorders rtlVBorders rtlLines" cellspacing="0">
        <colgroup>
            <col style="width: 23px;" />
            <col style="width: 23px;" />
            <col />
            <col />
            <col />
        </colgroup>
        <thead>
            <tr class="rtlHeader">
                <th colspan="3" class="rtlCF">
                    Column 1
                </th>
                <th>
                    Column 2
                </th>
                <th class="rtlCL">
                    Column 3
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="rtlR">
                <td class="rtlL rtlL1">
                    <input class="rtlCollapse" type="button" value=" " />
                </td>
                <td colspan="2" class="rtlCF">
                    Cell 1-1
                </td>
                <td>
                    Cell 1-2
                </td>
                <td class="rtlCL">
                    Cell 1-3
                </td>
            </tr>
            <tr class="rtlA">
                <td class="rtlL rtlL0">
                    &nbsp;
                </td>
                <td class="rtlL rtlL2">
                    &nbsp;
                </td>
                <td class="rtlCF">
                    Cell 1-1-1
                </td>
                <td>
                    Cell 1-1-2
                </td>
                <td class="rtlCL">
                    Cell 1-1-3
                </td>
            </tr>
            <tr class="rtlR rtlRSel">
                <td class="rtlL rtlL0">
                    &nbsp;
                </td>
                <td class="rtlL rtlL3">
                    <input class="rtlCollapse" type="button" value=" " />
                </td>
                <td class="rtlCF">
                    Cell 1-2-1
                </td>
                <td>
                    Cell 1-2-2
                </td>
                <td class="rtlCL">
                    Cell 1-2-3
                </td>
            </tr>
            <tr class="rtlA rtlRL rtlROut rtlRBtm">
                <td class="rtlL rtlL3">
                    <input class="rtlExpand" type="button" value=" " />
                </td>
                <td colspan="2" class="rtlCF">
                    Cell 2-1
                </td>
                <td>
                    Cell 2-2
                </td>
                <td class="rtlCL">
                    Cell 2-3
                </td>
            </tr>
        </tbody>
    </table>
</div>
  • div.RadTreeList.RadTreelist_SkinName - the control's wrapper, which holds the skin name. By default it is a block-level element with a border, so setting 100% width to the control is both unnecessary and causes content overflow by amount of the left and right border widths. If the ShowOuterBorders property is set to "false", then a RadTreeListNoBorder CSS class is appended as well.

  • table.rtlTable - the control's data container with a number of columns and rows, according to the datasource or control configuration. It contains a <thead> element with the header row, a <tbody> element with the data rows and a <colgroup> element with <cols> which may define column widths. Depending on the values of the control's GridLines and ShowTreeLines properties, the <table> element may receive also the following CSS classes: rtlHBorders(GridLines="Horizontal" or "Both"), rtlVBorders(GridLines="Vertical" or "Both"), rtlHVBorders(GridLines="Both") and rtlLines(ShowTreeLines="true"). The <table> element always renders a cellspacing="0" attribute. The expand/collapse columns are always 23px wide.

  • tr.rtlHeader - the header row. If sorting is enabled, the header cells contain <a> elements instead of plain text nodes. The sort indicators are represented by input.rtlSortAsc and input.rtlSortDesc elements/classes

  • data row CSS classes (all start with "rtlR", except the rtlA class):

    • tr.rtlR - odd (normal) rows

    • tr.rtlA - even (alternating) rows

    • tr.rtlRSel - selected rows

    • tr.rtlROut - applied to the first row following a row from a lower (nested) level of hierarchy

    • tr.rtlRL - applied to the last row from a given level of hierarchy, when a next row exists and is from an outer level

    • tr.rtlRBtm - applied to the last row (on the current page) of the control

  • data cell CSS classes (all start with "rtlC")

    • td.rtlCF - the first data cell in a row

    • td.rtlCL - the last data cell in a row. If there is a single column, its cells have both CSS classes

  • CSS classes related to treelines and expand/collapse behavior

    • td.rtlL- applied to all cells, which are not data cells (i.e. the ones that contain treelines, expand/collapse buttons, or neither of these)

    • td.rtlL0- applied to cells, which contain a single vertical treeline connecting two rows at the same level, with the upper row currently being expanded

    • td.rtlL1 - applied to the first cell from the first row from the first page, when it is expanded

    • td.rtlL2 - applied to cells which contain a T-shaped treeline (i.e. there are same-level rows above and below the current row)

    • td.rtlL3- applied to cells which contain an L-shaped treeline (these cells belong to the last rows at a given level)

    • input.rtlExpand - applied to the expand buttons, which are <input type="button" /> elements

    • input.rtlCollapse - applied to the collapse buttons, which are <input type="button" /> elements

If paging is enabled, the pager controls are placed inside a tr.rtlPager element.

In RTL mode the RadTreeList wrapper has a couple of additional CSS classes, namely - RadTreeListRTL and RadTreeListRTL_SkinName.

Notes on RadTreeList Skinning

  • The control's <table> element should have a border-collapse:separate and table-layout:fixed CSS styles applied. These are located in the base stylesheet.

  • The control's base stylesheet contains all border-width and border-style CSS styles that are needed. You can only specify border-color in your custom skin.

  • RadTreeList skins use the RadGrid sprite image for the header, row and pager styles. If you will be creating a custom RadTreeList skin, based on an existing skin, make sure you also take the RadGrid sprite image and place it in a location accessible by the RadTreeList CSS file.

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy