Add two or more controls in one cell in RadGridView

Environment

Product Version	Product	Author
2021.1.223	RadGridView for WinForms	Nadya Karaivanova

Description

This article will demonstrate how to add one or more controls in one cell in RadGridView (e.g. a progress bar and label).

Solution

This can be done easily by using a custom cell and subscribing for CreateCell event where to replace the default cell with the custom one.

First, let's create our custom GridDataCellElement that contains a RadLabelElement and RadProgressBarElement:

public class CustomProgressCell : GridDataCellElement
{
    public CustomProgressCell(GridViewColumn column, GridRowElement row)
        : base(column, row)
    {

    }
    private StackLayoutPanel panel;
    private RadLabelElement label;
    private RadProgressBarElement progressBar;

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        this.panel = new StackLayoutPanel();
        this.panel.Margin = new System.Windows.Forms.Padding(5);
        this.panel.Orientation = System.Windows.Forms.Orientation.Vertical;

        this.label = new RadLabelElement();
        this.label.TextAlignment = ContentAlignment.MiddleCenter;
        this.panel.Children.Add(this.label);

        this.progressBar = new RadProgressBarElement();
        this.progressBar.MinSize = new Size(0, 20);
        this.panel.Children.Add(this.progressBar);

        this.Children.Add(this.panel);
    }
    protected override void SetContentCore(object value)
    {
        object cellValue = value;

        if (cellValue is DBNull || cellValue == null)
            cellValue = 0;

        this.progressBar.Value1 = Convert.ToInt32(cellValue);
        this.label.Text = "Value: " + cellValue.ToString();
    }

}

Public Class CustomProgressCell
    Inherits GridDataCellElement

    Public Sub New(ByVal column As GridViewColumn, ByVal row As GridRowElement)
        MyBase.New(column, row)
    End Sub

    Private panel As StackLayoutPanel
    Private label As RadLabelElement
    Private progressBar As RadProgressBarElement

    Protected Overrides Sub CreateChildElements()
        MyBase.CreateChildElements()
        Me.panel = New StackLayoutPanel()
        Me.panel.Margin = New System.Windows.Forms.Padding(5)
        Me.panel.Orientation = System.Windows.Forms.Orientation.Vertical
        Me.label = New RadLabelElement()
        Me.label.TextAlignment = ContentAlignment.MiddleCenter
        Me.panel.Children.Add(Me.label)
        Me.progressBar = New RadProgressBarElement()
        Me.progressBar.MinSize = New Size(0, 20)
        Me.panel.Children.Add(Me.progressBar)
        Me.Children.Add(Me.panel)
    End Sub

    Protected Overrides Sub SetContentCore(ByVal value As Object)
        Dim cellValue As Object = value
        If TypeOf cellValue Is DBNull OrElse cellValue Is Nothing Then cellValue = 0
        Me.progressBar.Value1 = Convert.ToInt32(cellValue)
        Me.label.Text = "Value: " & cellValue.ToString()
    End Sub
End Class

When we finished our work on the custom cell element, now we should associate the cells of the Progress Column with this custom cell type. In order to do so, handle the CreateCell event which is called once for each cell when RadGridView is shown for the first time. When this event is fired for the cells of Progress Column, we set the property CellType of the GridViewCreateCellEventArgs to our custom cell type:

private void RadGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
{
    if (e.CellType == typeof(GridDataCellElement))
    {
        GridViewDataColumn dataColumn = e.Column as GridViewDataColumn;

        if (dataColumn.Name == "Progress")
        {
            e.CellType = typeof(CustomProgressCell);
        }
    }
}

Private Sub RadGridView1_CreateCell(ByVal sender As Object, ByVal e As GridViewCreateCellEventArgs)
    If e.CellType = GetType(GridDataCellElement) Then
        Dim dataColumn As GridViewDataColumn = TryCast(e.Column, GridViewDataColumn)
        If dataColumn.Name = "Progress" Then
            e.CellType = GetType(CustomProgressCell)
        End If
    End If
End Sub