New to Telerik UI for WinForms? Download free 30-day trial

Formatting Items

Depending on the ViewType, RadListView provides a convenient way for customizing the items.

Formatting items in ListView and IconsView modes

Items appearance in RadListView can be customized by making use of the VisualItemFormatting event. The following example, demonstrates how you can change the color of an item which is being selected.

By using this event to customize the items appearance, you should always provide an else clause, where you reset the appearance settings which you have introduced. This is necessary since RadListView uses data virtualization, which might lead to unpredicted appearance results when items are being reused.

Figure 1: Customizing items in the VisualItemFormatting event

WinForms RadListView Customizing items in the VisualItemFormatting event

Customizing items when using the VisualItemFormatting event

Font font = new Font("Consolas", 14, FontStyle.Bold);
void radListView1_VisualItemFormatting(object sender, Telerik.WinControls.UI.ListViewVisualItemEventArgs e)
{
    if (e.VisualItem.Selected)
    {
        e.VisualItem.NumberOfColors = 1;
        e.VisualItem.BackColor = Color.LightGreen;
        e.VisualItem.ForeColor = Color.Red;
        e.VisualItem.BorderColor = Color.Blue;
        e.VisualItem.Font = font;
    }
    else
    {
        e.VisualItem.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.ForeColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.BorderColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.FontProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

Private font As New Font("Consolas", 14, FontStyle.Bold)
Private Sub radListView1_VisualItemFormatting(sender As Object, e As Telerik.WinControls.UI.ListViewVisualItemEventArgs)
    If e.VisualItem.Selected Then
        e.VisualItem.NumberOfColors = 1
        e.VisualItem.BackColor = Color.LightGreen
        e.VisualItem.ForeColor = Color.Red
        e.VisualItem.BorderColor = Color.Blue
        e.VisualItem.Font = font
    Else
        e.VisualItem.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local)
        e.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local)
        e.VisualItem.ResetValue(LightVisualElement.ForeColorProperty, Telerik.WinControls.ValueResetFlags.Local)
        e.VisualItem.ResetValue(LightVisualElement.BorderColorProperty, Telerik.WinControls.ValueResetFlags.Local)
        e.VisualItem.ResetValue(LightVisualElement.FontProperty, Telerik.WinControls.ValueResetFlags.Local)
    End If
End Sub

Formatting cells in DetailsView mode

The DetailsView of RadListView provides a grid-like interface for displaying items with more than one data field. It is possible to customize each cell element, using the CellFormatting event.

Cell elements are created only for currently visible cells and they are being reused, when scrolling. In order to prevent applying the formatting to other cell elements, all applied styles should be reset for the rest of the cell elements.

Let’s assume that the RadListView is bound to the Products table from the Northwind database. The code snippet below demonstrates how to apply different colors and font for the data cells in the control, considering the “Discontinued” cell’s value:

Figure 2: Customizing cells when using the CellFormatting event

WinForms RadListView Customizing cells when using the CellFormatting event

Customizing cells when using the CellFormatting event

private void ListViewFormattingItems_Load(object sender, EventArgs e)
{
    this.productsTableAdapter.Fill(this.nwindDataSet.Products);
    this.radListView1.DataSource = this.productsBindingSource;
    this.radListView1.DisplayMember = "ProductName";
    this.radListView1.ValueMember = "ProductID";
    this.radListView1.ViewType = ListViewType.DetailsView;
    this.radListView1.CellFormatting += radListView1_CellFormatting;
}
Font newFont = new Font("Arial", 12f, FontStyle.Bold);
private void radListView1_CellFormatting(object sender, ListViewCellFormattingEventArgs e)
{
    DetailListViewDataCellElement cell = e.CellElement as DetailListViewDataCellElement;
    if (cell != null)
    {
        DataRowView productRowView = cell.Row.DataBoundItem as DataRowView;
        if (productRowView != null && (bool)productRowView.Row["Discontinued"] == true)
        {
            e.CellElement.BackColor = Color.Yellow;
            e.CellElement.ForeColor = Color.Red;
            e.CellElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
            e.CellElement.Font = newFont;
        }
        else
        {
            e.CellElement.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, Telerik.WinControls.ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.FontProperty, Telerik.WinControls.ValueResetFlags.Local);
        }
    }
}

Private Sub FormattingItems_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    Me.ProductsTableAdapter.Fill(Me.NwindDataSet.Products)
    Me.RadListView1.DataSource = Me.ProductsBindingSource
    Me.RadListView1.DisplayMember = "ProductName"
    Me.RadListView1.ValueMember = "ProductID"
    Me.RadListView1.ViewType = ListViewType.DetailsView
    AddHandler Me.RadListView1.CellFormatting, AddressOf radListView1_CellFormatting
End Sub
Private newFont As New Font("Arial", 12.0F, FontStyle.Bold)
Private Sub radListView1_CellFormatting(sender As Object, e As ListViewCellFormattingEventArgs)
    Dim cell As DetailListViewDataCellElement = TryCast(e.CellElement, DetailListViewDataCellElement)
    If cell IsNot Nothing Then
        Dim productRowView As DataRowView = TryCast(cell.Row.DataBoundItem, DataRowView)
        If productRowView IsNot Nothing AndAlso CBool(productRowView.Row("Discontinued")) = True Then
            e.CellElement.BackColor = Color.Yellow
            e.CellElement.ForeColor = Color.Red
            e.CellElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid
            e.CellElement.Font = newFont
        Else
            e.CellElement.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local)
            e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, Telerik.WinControls.ValueResetFlags.Local)
            e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local)
            e.CellElement.ResetValue(LightVisualElement.FontProperty, Telerik.WinControls.ValueResetFlags.Local)
        End If
    End If
End Sub

In order to customize the header cells, the e.CellElement property should be cast to the DetailListViewHeaderCellElement type.

private void radListView1_CellFormatting(object sender, ListViewCellFormattingEventArgs e)
{
    if (e.CellElement is DetailListViewHeaderCellElement)
    {
        e.CellElement.TextAlignment = ContentAlignment.MiddleLeft;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.TextAlignmentProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

Private Sub radListView1_CellFormatting1(ByVal sender As Object, ByVal e As ListViewCellFormattingEventArgs)
    If TypeOf e.CellElement Is DetailListViewHeaderCellElement Then
        e.CellElement.TextAlignment = ContentAlignment.MiddleLeft
    Else
        e.CellElement.ResetValue(LightVisualElement.TextAlignmentProperty, Telerik.WinControls.ValueResetFlags.Local)
    End If
End Sub

See Also

In this article