Skins

The predefined layouts of RadListView, which in turn have a predefined HTML rendering, enable you to use the control's embedded skins to achieve a consistent look of RadListView with the other Telerik controls on the page.

Below is a set of some of the Telerik RadListView skins:

The Material skin is available for the Lightweight RenderMode only. If you experience visual issues with it, make sure your controls are not using the default Classic mode.

Changing the RadListView skin

The predefined layouts of RadListView are generated in design time and the CSS class, which carries the skin information is hard-coded in the LayoutTemplate. So, in order to change the control's skin at runtime, you need to use a binding expression for the skin-specific CSS class:

        <telerik:RadListView ID="RadListView1" runat="server">
            <LayoutTemplate>
                <div class="RadListView RadListView_<%#Container.Skin %>">
                    ...
                </div>
            </LayoutTemplate>
        </telerik:RadListView>

In addition, after changing the Skin property value at runtime, you must rebind the control:

        RadListView1.Skin = "AnotherSkin";
        RadListView1.Rebind();

If you change the RadListView skin manually in source code view, you must also change the skin-specific CSS class to match the new skin name (unless you are using a binding expression as shown above).

RadListView CSS classes

The CSS classes defined in the RadListView embedded skins are:

CSS class	Description
RadListView	applied to the control's wrapper, does not depend on the skin name
RadListView_SkinName	applied to the control's wrapper, depends on the skin name
rlvI	applied to regular items
rlvA	applied to alternating items
rlvISel	applied to selected items
rlvIEdit	applied to items in edit mode
rlvIEmpty	applied to empty items in a group
rlvIGroup	applied to group items
rlvHeader	applied to the header row of the grid predefined layout
rlvBAdd	applied to the ADD button
rlvBUpdate	applied to the UPDATE button
rlvBCancel	applied to the CANCEL button
rlvBSel	applied to the SELECT button
rlvBDel	applied to the DELETE button
rlvBEdit	applied to the EDIT button

Apart from the predefined RadListView layouts, the above CSS classes can also be used in custom layouts. If used correctly, they should produce a similar appearance on the respective HTML elements. For example, the rlvA CSS class always defines a background color for alternating items, so you can set this CSS class to a random element that you use as a wrapper for the alternating items - div, li, table, td, etc.

In addition, some of the above CSS classes participate in different CSS rules, depending on the element that they are applied to. For example, if the rlvA CSS class is applied to a table row element, it will set borders for nested table cells, and if it is applied to a table cell, it will set borders to it.

In order to be able to use the native RadListView CSS classes in custom layouts, you should have at least basic knowledge of CSS selectors and CSS specificity. Using Firebug to test the custom layout and any styling issues that might occur, is recommended.