How to set height to RadListView and make it responsive

HOW TO

In this KB article you will learn how to set the RadListView Height. This would allow you to define a responsive layout or to let it fill its container height to 100%.

Solution

1. Define a container for the items with the desired settings inside the LayoutTemplate, because RadListView does not render a wrapping element for its items:

<div class="contentContainer">
    <telerik:RadListView ItemPlaceholderID="Placeholder1" ID="RadListView" RenderMode="Lightweight" runat="server" OnNeedDataSource="RadListView1_NeedDataSource">
        <LayoutTemplate>
            <div style="height: 100%; background: yellow; overflow: auto;" id="listViewLayout">
                <asp:PlaceHolder runat="server" ID="Placeholder1" />
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <div style="margin: 5px 0px 8px 0px; border: 1px solid black;">
                <%# Eval("ID") %>
            </div>
        </ItemTemplate>
    </telerik:RadListView>
</div>

1. Add some styling to match your needs. This will make the ListView be 50% of the page:

<style>
    html, body, form {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }

    .contentContainer {
        width: 50%;
        height: 50%;
    }
</style>

1. Add some dummy data in the control:

protected void RadListView1_NeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)
{
    (sender as RadListView).DataSource = GetGridSource();
}
private DataTable GetGridSource()
{
    DataTable dataTable = new DataTable();

    DataColumn column = new DataColumn();
    column.DataType = Type.GetType("System.Int32");
    column.ColumnName = "ID";
    dataTable.Columns.Add(column);

    for (int i = 0; i <= 100; i++)
    {
        DataRow row = dataTable.NewRow();
        row["ID"] = i + 1;

        dataTable.Rows.Add(row);
    }

    return dataTable;
}

Protected Sub RadListView1_NeedDataSource(ByVal sender As Object, ByVal e As RadListViewNeedDataSourceEventArgs)
    (TryCast(sender, RadListView)).DataSource = GetGridSource()
End Sub

Private Function GetGridSource() As DataTable
    Dim dataTable As DataTable = New DataTable()
    Dim column As DataColumn = New DataColumn()
    column.DataType = Type.[GetType]("System.Int32")
    column.ColumnName = "ID"
    dataTable.Columns.Add(column)

    For i As Integer = 0 To 100
        Dim row As DataRow = dataTable.NewRow()
        row("ID") = i + 1
        dataTable.Rows.Add(row)
    Next

    Return dataTable
End Function