Edit this page

Predefined

RadListView gives you the opportunity to specify custom layouts and thus display your data in any preferable way. In addition, as a greater convenience to the developer, the control offers six predefined layouts that enable you to display your data as a/an:

  • Grid

  • Unordered list

  • Ordered list

  • Flow pattern

  • Single row pattern

  • Floated tiles

In order to take advantage of this feature of RadListView's you need to use the smart tag control designer and pick the Open Configuration Wizard option:
Open Layout Editor

The designer will open a Configuration Manager window where you can adjust two types of options:

  • Functionality

  • Layouts and Appearance

In order to use the predefined layouts, you should choose the second option:
Layouts and Appearance

After a layout has been chosen the designer will automatically generate the necessary mark-up and binding expressions. Below is the auto-generated mark-up for the Grid layout of a ListView bound to the Employees table of the the Northwind database:

<telerik:RadListView ID="ListView" runat="server" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1">
    <AlternatingItemTemplate>
        <tr class="rlvA">
            <td>
                <asp:Label ID="EmployeeIDLabel" runat="server" Text='<%# Eval("EmployeeID") %>' />
            </td>
            <td>
                <asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
            </td>
            <td>
                <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
            </td>
            <td>
                <asp:Label ID="TitleOfCourtesyLabel" runat="server" Text='<%# Eval("TitleOfCourtesy") %>' />
            </td>
            <td>
                <asp:Label ID="BirthDateLabel" runat="server" Text='<%# Eval("BirthDate") %>' />
            </td>
            <td>
                <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' />
            </td>
        </tr>
    </AlternatingItemTemplate>
    <EditItemTemplate>
        <tr class="rlvIEdit">
            <td colspan="6">
                <table cellspacing="0" class="rlvEditTable">
                    <tr>
                        <td>
                            <asp:Label ID="EmployeeIDLabel2" runat="server" Text="EmployeeID"></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="EmployeeIDLabel1" runat="server" Text='<%# Eval("EmployeeID") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="LastNameLabel2" runat="server" AssociatedControlID="LastNameTextBox"
                                Text="LastName"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="LastNameTextBox" runat="server" Text='<%# Bind("LastName") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="TitleLabel2" runat="server" AssociatedControlID="TitleTextBox" Text="Title"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="TitleTextBox" runat="server" Text='<%# Bind("Title") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="TitleOfCourtesyLabel2" runat="server" AssociatedControlID="TitleOfCourtesyTextBox"
                                Text="TitleOfCourtesy"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="TitleOfCourtesyTextBox" runat="server" Text='<%# Bind("TitleOfCourtesy") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="BirthDateLabel2" runat="server" AssociatedControlID="BirthDateTextBox"
                                Text="BirthDate"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="BirthDateTextBox" runat="server" Text='<%# Bind("BirthDate") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="CityLabel2" runat="server" AssociatedControlID="CityTextBox" Text="City"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="CityTextBox" runat="server" Text='<%# Bind("City") %>' />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </EditItemTemplate>
    <InsertItemTemplate>
        <tr class="rlvIEdit">
            <td colspan="6">
                <table cellspacing="0" class="rlvEditTable">
                    <tr>
                        <td>
                            <asp:Label ID="LastNameLabel2" runat="server" AssociatedControlID="LastNameTextBox"
                                Text="LastName"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="LastNameTextBox" runat="server" Text='<%# Bind("LastName") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="TitleLabel2" runat="server" AssociatedControlID="TitleTextBox" Text="Title"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="TitleTextBox" runat="server" Text='<%# Bind("Title") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="TitleOfCourtesyLabel2" runat="server" AssociatedControlID="TitleOfCourtesyTextBox"
                                Text="TitleOfCourtesy"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="TitleOfCourtesyTextBox" runat="server" Text='<%# Bind("TitleOfCourtesy") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="BirthDateLabel2" runat="server" AssociatedControlID="BirthDateTextBox"
                                Text="BirthDate"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="BirthDateTextBox" runat="server" Text='<%# Bind("BirthDate") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="CityLabel2" runat="server" AssociatedControlID="CityTextBox" Text="City"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="CityTextBox" runat="server" Text='<%# Bind("City") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Button ID="PerformInsertButton" runat="server" CommandName="PerformInsert" CssClass="rlvBAdd"
                                Text=" " />
                            <asp:Button ID="CancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                                CssClass="rlvBCancel" Text=" " />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </InsertItemTemplate>
    <ItemTemplate>
        <tr class="rlvI">
            <td>
                <asp:Label ID="EmployeeIDLabel" runat="server" Text='<%# Eval("EmployeeID") %>' />
            </td>
            <td>
                <asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
            </td>
            <td>
                <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
            </td>
            <td>
                <asp:Label ID="TitleOfCourtesyLabel" runat="server" Text='<%# Eval("TitleOfCourtesy") %>' />
            </td>
            <td>
                <asp:Label ID="BirthDateLabel" runat="server" Text='<%# Eval("BirthDate") %>' />
            </td>
            <td>
                <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' />
            </td>
        </tr>
    </ItemTemplate>
    <EmptyDataTemplate>
        <div class="RadListView RadListView_Default">
            <div class="rlvEmpty">
                There are no items to be displayed.</div>
        </div>
    </EmptyDataTemplate>
    <LayoutTemplate>
        <div class="RadListView RadListView_Default">
            <table cellspacing="0" style="width: 100%;">
                <thead>
                    <tr class="rlvHeader">
                        <th>
                            EmployeeID
                        </th>
                        <th>
                            LastName
                        </th>
                        <th>
                            Title
                        </th>
                        <th>
                            TitleOfCourtesy
                        </th>
                        <th>
                            BirthDate
                        </th>
                        <th>
                            City
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="itemPlaceholder" runat="server">
                    </tr>
                </tbody>
            </table>
        </div>
    </LayoutTemplate>
    <SelectedItemTemplate>
        <tr class="rlvISel">
            <td>
                <asp:Label ID="EmployeeIDLabel" runat="server" Text='<%# Eval("EmployeeID") %>' />
            </td>
            <td>
                <asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
            </td>
            <td>
                <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
            </td>
            <td>
                <asp:Label ID="TitleOfCourtesyLabel" runat="server" Text='<%# Eval("TitleOfCourtesy") %>' />
            </td>
            <td>
                <asp:Label ID="BirthDateLabel" runat="server" Text='<%# Eval("BirthDate") %>' />
            </td>
            <td>
                <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' />
            </td>
        </tr>
    </SelectedItemTemplate>
</telerik:RadListView>

For a live demonstration of the above-described feature of RadListView's, please, visit the Predefined Layouts example online page.

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

Give article feedback

Tell us how we can improve this article

close
Dummy