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);
    }
}

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);
        }
    }
}

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);
    }
}