Edit this page

HTML Output and CSS Styling

RadListView is a renderless component and provides complete control over its appearance. However, it also comes with a set of ready-to-use most commonly used layouts - grid, unordered list, ordered list, flow, single row and tiles. These layouts depend on predefined HTML output and CSS styling. You can still modify the HTML output of these layouts after selecting one of them in Visual Studio design mode, so that the HTML output is generated in source mode.

Grid

The Grid layout presents the RadListView data in a <table>. Each table column corresponds to a datafield. Each datafield name is displayed in a header cell (<th>). Each data item is represented by a table row (<tr>).

<div class="RadListView RadListView_Forest">
    <table cellspacing="0" style="width: 100%;">
        <thead>
            <tr class="rlvHeader">
                <th>
                    ProductID
                </th>
                <th>
                    ProductName
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="rlvI">
                <td>
                    ...item content...
                </td>
                <td>
                    ...item content...
                </td>
            </tr>
            <tr class="rlvA">
                <td>
                    ...item content...
                </td>
                <td>
                    ...item content...
                </td>
            </tr>
        </tbody>
    </table>
</div>

Floated Tiles

The Floated Tiles layout present the RadListView data in boxes (tiles), which arrange automatically, depending on the available horizontal space. Note that since the tiles (

elements) are floated with a CSS style, they should have explicit width and height, otherwise they will resize according to their content and the resulting layout may not look good - the tiles will have different sizes and will not be aligned. The same width, height, margin and padding styles can be defined for all tiles in Visual Studio design time when choosing the layout.
<div class="RadListView RadListViewFloated RadListView_Forest">
    <div class="rlvFloated rlvAutoScroll">
        <div style="height: 120px; width: 120px; margin: 5px; padding-left: 15px;" class="rlvI">
            ...item content...
        </div>
        <div style="height: 120px; width: 120px; margin: 5px; padding-left: 15px;" class="rlvA">
            ...item content...
        </div>
    </div>
</div>

Flow

The Flow layout presents the RadListView data in blocks one below the other. Each block is represented by a

element.
<div class="RadListView RadListView_Forest">
    <div class="rlvI">
        ...item content...
    </div>
    <div class="rlvA">
        ...item content...
    </div>
</div>

Single Row

The Single Row layout presents the RadListView data in a table with only one row, regardless of the number of items. Each item is represented by a table cell (

).
<div class="RadListView RadListView_Forest">
    <table cellspacing="0">
        <tbody>
            <tr>
                <td class="rlvI">
                    ...item content...
                </td>
                <td class="rlvA">
                    ...item content...
                </td>
            </tr>
        </tbody>
    </table>
</div>

Unordered List or Ordered List

The Unordered and Ordered List layouts present the RadListView data in the respective HTML elements - <ul> or <ol>. Each data item is represented by a list item - <li>.

<div class="RadListView RadListView_Forest">
    <ul>
        <li class="rlvI">...item content... </li>
        <li class="rlvA">...item content... </li>
    </ul>
</div>

RadListView CSS classes

Regardless of the chosen predefined layout, the RadListView CSS classes are reused on different elements.

CSS class Applied on HTML element Description
RadListView div control's wrapper
RadListView_SkinName div control's wrapper
rlvI tr, div, td, li (depending on the layout) item container
rlvA tr, div, td, li (...) alternating item
rlvISel tr, div, td, li selected item
rlvIEdit tr, div, td, li edit item
rlvIInsert tr, div, td, li insert item
rlvIEmpty tr, div, td, li empty item
rlvHeader tr header row (Grid layout)
RadListViewFloated div control's wrapper (Floated Tiles layout)
rlvFloated div tiles' wrapper, child of the control's wrapper (Floated Tiles layout). Its purpose is to clear the CSS floats of the items
rlvAutoScroll div tiles' wrapper, child of the control's wrapper (Floated Tiles layout). When set, the floated items will generate scrollbars if their contents does not fit
rlvNoScroll div tiles' wrapper, child of the control's wrapper (Floated Tiles layout). When set, the floated items will clip content if it does not fit
rlvEmpty div control's wrapper when no data. Do not confuse with rlvIEmpty
rlvInput input (type="text") edit textbox - the default edit control
rlvBAdd input (type="button") ADD button
rlvBUpdate input (type="button") UPDATE button
rlvBCancel input (type="button") CANCEL button
rlvBSel input (type="button") SELECT button
rlvBDel input (type="button") DELETE button
rlvBEdit input (type="button") EDIT button
rlvBDrag input (type="button") DRAG button