RadControls for WinForms
Contents

RELATED VIDEOS

Formatting Data In RadGridView for WinForms

In this RadTip, John Kellar demonstrates how you can apply custom formatting to data within a RadGridView for Windows Forms. (Runtime: 09:14)

gridview-cells-formatting-cells 006

CellFormatting event is used to add formatting to grid data cells including the new row cells. For example, the code sample below changes the ForeColor in all cells in the "KBytes" column to red:

Note

Due to the UI virtualization in RadGridView, cell elements are created only for currently visible cells and are being reused during operations like scrolling, filtering, grouping and so on.

In order to prevent applying the formatting to other columns' cell elements (because of the cell reuse) all customization should be resetted for the rest of the cell elements

Please refer to the Fundamentals topic for more information.

Example: Changing the data cells font color

Copy[C#] Formatting cells fore color
void radGridView1_CellFormatting1(object sender, Telerik.WinControls.UI.CellFormattingEventArgs e)
{
    if (e.CellElement.ColumnInfo.Name == "KBytes")
    {
        e.CellElement.ForeColor = Color.Red;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
    }
}
Copy[VB.NET] Formatting cells fore color
Private Sub RadGridView1_CellFormatting1(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.CellFormattingEventArgs) Handles RadGridView1.CellFormatting
    If e.CellElement.ColumnInfo.Name = "KBytes" Then
        e.CellElement.ForeColor = Color.Red
    Else
        e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local)
    End If
End Sub

gridview-cells-formatting-cells 001

Example: Cells background formatting 

This is an advanced example of using CellFormatting event to highlight certain cells in red color based on the values of cells in the same row but different column. In the example, the values in the first column are highlighted if the value in the check box column returns true:

 

gridview-cells-formatting-cells 002

Copy[C#] Formatting cells
void radGridView1_CellFormatting2(object sender, Telerik.WinControls.UI.CellFormattingEventArgs e)
{
    if (e.CellElement.ColumnInfo.HeaderText == "Id")
    {
        if (e.CellElement.RowInfo.Cells["BMP"].Value != null)
        {
            if ((bool)e.CellElement.RowInfo.Cells["BMP"].Value == true)
            {
                e.CellElement.DrawFill = true;
                e.CellElement.ForeColor = Color.Blue;
                e.CellElement.NumberOfColors = 1;
                e.CellElement.BackColor = Color.Aqua;
            }
            else
            {
                e.CellElement.DrawFill = true;
                e.CellElement.ForeColor = Color.Yellow;
                e.CellElement.NumberOfColors = 1;
                e.CellElement.BackColor = Color.Green;
            }
        }
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.NumberOfColorsProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
    }
}
Copy[VB.NET] Formatting cells
Private Sub RadGridView1_CellFormatting2(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.CellFormattingEventArgs) Handles RadGridView1.CellFormatting
    If e.CellElement.ColumnInfo.HeaderText = "Id" Then
        If e.CellElement.RowInfo.Cells("BMP").Value IsNot Nothing Then
            If CBool(e.CellElement.RowInfo.Cells("BMP").Value) = True Then
                e.CellElement.DrawFill = True
                e.CellElement.ForeColor = Color.Blue
                e.CellElement.NumberOfColors = 1
                e.CellElement.BackColor = Color.Aqua
            Else
                e.CellElement.DrawFill = True
                e.CellElement.ForeColor = Color.Yellow
                e.CellElement.NumberOfColors = 1
                e.CellElement.BackColor = Color.Green
            End If
        End If
    Else
        e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local)
        e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local)
        e.CellElement.ResetValue(LightVisualElement.NumberOfColorsProperty, ValueResetFlags.Local)
        e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local)
    End If
End Sub

ViewCellFormatting - formatting non-data cells

While CellFormatting event is fired only for data cells, ViewCellFormatting is fired for all RadGridView cells. So if you want to format the grouping row or the header cells, you should use the ViewCellFormatting event.

Example: Change group and header cells font and removing the default filter operator text

For example, to change the font of the header cells and the group cells use the following code:

Copy[C#] Formatting non-data rows
Font newFont = new Font("Arial", 12f, FontStyle.Bold);
void radGridView1_ViewCellFormatting1(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement is GridHeaderCellElement || e.CellElement is GridGroupContentCellElement)
    {
        e.CellElement.Font = newFont;
        e.CellElement.ForeColor = Color.Blue;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.FontProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
    }

    //hiding the text from the filter cells
    GridFilterCellElement filterCell = e.CellElement as GridFilterCellElement;
    if (filterCell != null)
    {
        filterCell.FilterOperatorText.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
    }

}
Copy[VB.NET] Formatting non-data rows
Dim newFont = New Font("Arial", 12.0F, FontStyle.Bold)
Private Sub RadGridView1_ViewCellFormatting1(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.CellFormattingEventArgs) Handles RadGridView1.ViewCellFormatting
    If TypeOf e.CellElement Is GridHeaderCellElement OrElse TypeOf e.CellElement Is GridGroupContentCellElement Then
        e.CellElement.Font = newFont
        e.CellElement.ForeColor = Color.Blue
    Else
        e.CellElement.ResetValue(LightVisualElement.FontProperty, ValueResetFlags.Local)
        e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local)
    End If

    'hiding the text from the filter cells
    Dim filterCell As GridFilterCellElement = TryCast(e.CellElement, GridFilterCellElement)
    If filterCell IsNot Nothing Then
        filterCell.FilterOperatorText.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
    End If
End Sub

gridview-cells-formatting-cells 003

Example 2: Change TextAlignment and BackColor of group rows

To modify the text alignment and the back color in the group rows use the following code snippet:

Copy[C#] Formatting non-data rows
void radGridView1_ViewCellFormatting2(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement.RowInfo is GridViewGroupRowInfo)
    {
        e.CellElement.DrawFill = true;
        e.CellElement.BackColor = Color.Aquamarine;
        e.CellElement.TextAlignment = ContentAlignment.MiddleRight;
        e.CellElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.TextAlignmentProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
    }
}
Copy[VB.NET] Formatting non-data rows
Private Sub RadGridView1_ViewCellFormatting2(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.CellFormattingEventArgs) Handles RadGridView1.ViewCellFormatting
    If TypeOf e.CellElement.RowInfo Is GridViewGroupRowInfo Then
        e.CellElement.DrawFill = True
        e.CellElement.BackColor = Color.Aquamarine
        e.CellElement.TextAlignment = ContentAlignment.MiddleRight
        e.CellElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid
    Else
        e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local)
        e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local)
        e.CellElement.ResetValue(LightVisualElement.TextAlignmentProperty, ValueResetFlags.Local)
        e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local)
    End If
End Sub

gridview-cells-formatting-cells 004

Note

In certain cases, where a custom layout is needed (for example, when you want to place RadCheckBoxElement in a specific place in a header cell) you should create your own type of cell instead of using ViewCellFormatting. Such an example is demonstrated in this knowledge base article.

Example 3: Change the appearance of the buttons in GridViewCommandColumn

Sometimes, you may need to change the appearance of the buttons that appear in the cells of the GridViewCommandColumn. These buttons are children of the RadGridView cells, so in order to access them, you should take them from the Children collection of the visual cells. We will demonstrate how this should be done by analyzing the following case.

Let's say that you have a number of employees. Only one employee is Vice President of the company, while the others are managers and sales representatives. In RadGridView you have a GridViewCommandColumn, the buttons of which allow the end-users to edit the details of all records, except the one that belongs to the Vice President. So, depending on the value of the Title cell, you should set the Enabled property of the respective RadButtonElement to true or false. Here is how we can achieve that:

Copy[C#]
void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement.ColumnInfo is GridViewCommandColumn)
    {
        // This is how we get the RadButtonElement instance from the cell
        RadButtonElement button = (RadButtonElement)e.CellElement.Children[0];

        if (e.CellElement.RowInfo.Cells["Title"].Value != null)
        {
            string title = e.CellElement.RowInfo.Cells["Title"].Value.ToString();
            if (title == "Vice President, Sales")
            {
                button.Enabled = false;
            }
            else
            {
                button.Enabled = true;
            }
        }
    }
}
Copy[VB.NET]
Private Sub radGridView1_CellFormatting(ByVal sender As Object, ByVal e As CellFormattingEventArgs) Handles RadGridView1.CellFormatting
    If TypeOf e.CellElement.ColumnInfo Is GridViewCommandColumn Then
        'This is how we get the RadButtonElement instance from the cell
        Dim button As RadButtonElement = CType(e.CellElement.Children(0), RadButtonElement)

        If e.CellElement.RowInfo.Cells("Title").Value IsNot Nothing Then
            Dim title As String = e.CellElement.RowInfo.Cells("Title").Value.ToString()
            If title = "Vice President, Sales" Then
                button.Enabled = False
            Else
                button.Enabled = True
            End If
        End If
    End If
End Sub

And this is how the result looks:

gridview-cells-formatting-cells 009

Formatting cells on demand

Sometimes you may need to format the cells on a specific user action, for example, on a button click. Let's take the following scenario: you have a search box (RadTextBox) above RadGridView and a RadButton. When you click the button, RadGridView should highlight the cells that match the text typed in the RadTextBox.

Here is how to do it:

  • First, you should handle the CellFormatting event of RadGridView, setting the back color of those cells that have text that matches the text of RadTextBox

    Copy[C#]
    void radGridView1_CellFormatting(object sender, Telerik.WinControls.UI.CellFormattingEventArgs e)
{
    if (e.CellElement.Text == this.radTextBox1.Text)
    {
        e.CellElement.DrawFill = true;
        e.CellElement.BackColor = Color.Yellow;
        e.CellElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.CellElement.ResetValue(VisualElement.BackColorProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
    }
}
    Copy[VB.NET]
    Private Sub RadGridView1_CellFormatting(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.CellFormattingEventArgs) Handles RadGridView1.CellFormatting
    If e.CellElement.Text = Me.RadTextBox1.Text Then
        e.CellElement.DrawFill = True
        e.CellElement.BackColor = Color.Yellow
        e.CellElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid
    Else
        e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, Telerik.WinControls.ValueResetFlags.Local)
        e.CellElement.ResetValue(VisualElement.BackColorProperty, ValueResetFlags.Local)
        e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local)
    End If
End Sub

  • Now comes the tricky part. The user types some text, but then we should somehow notify RadGridView that it needs to refresh itself. This is done by calling the Update method of the TableElement, passing the StateChanged argument as a parameter.

    Copy[C#]
    void searchButton_Click(object sender, EventArgs e)
{
    this.radGridView1.TableElement.Update(GridUINotifyAction.StateChanged);
}
    Copy[VB.NET]
    Private Sub searchButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles searchButton.Click
    Me.RadGridView1.TableElement.Update(GridUINotifyAction.StateChanged)
End Sub

gridview-cells-formatting-cells 007

Format cell with Style property

The GridViewCellInfo Style property gives direct access to the cell’s visual properties. It makes it possible to set styles to cells in runtime without using events like CellFormatting or the ConditionalFormattingObject.

Note

This approach lets you customize visual properties which are defined by the theme. All changes set this way will have a greater priority than the theme.

The first thing to do for using the cell’s Style is to define what custom visual properties will use this cell. You can define that the cell will:

  • CustomizeFill

  • CustomizeBorder

Using the Style property allows you to define cell’s style properties:

  • Fill

  • Border

  • Font

  • ForeColor

The example below shows how to customize the Font and BackColor of RadGridView cell.

Copy[C#] Formatting cells vie Style property
Font myFont = new Font(new FontFamily("Calibri"), 12.0F, FontStyle.Bold);

private void StyleCell(GridViewCellInfo cell)
{
    cell.Style.Font = myFont;
    cell.Style.CustomizeFill = true;
    cell.Style.GradientStyle = GradientStyles.Solid;
    cell.Style.BackColor = Color.FromArgb(162, 215, 255);
}
Copy[VB.NET] Formatting cells vie Style property
Private myFont As New Font(New FontFamily("Calibri"), 12.0F, FontStyle.Bold)

Private Sub StyleCell(cell As GridViewCellInfo)
    cell.Style.Font = myFont
    cell.Style.CustomizeFill = True
    cell.Style.GradientStyle = GradientStyles.Solid
    cell.Style.BackColor = Color.FromArgb(162, 215, 255)
End Sub

Here is how to call this method of a certain cell:

Copy[C#] Call StyleCell method
this.StyleCell(this.radGridView1.Rows[1].Cells[1]);
Copy[VB.NET] Call StyleCell method
Me.StyleCell(Me.RadGridView1.Rows(1).Cells(1))
gridview-cells-formatting-cells 008