Creating custom rows

RadGridView provides a variety of visual cells per row with different functionality and purpose. However, in some cases you may need to display custom elements, not a single cell per column. This article demonstrates a sample approach how to create a custom row element.

Custom new row

Consider the RadGridView is populated with data form Northwind.Products table.

• C#
• VB.NET

public static object DataSource;
private void CreateCustomNewRow_Load(object sender, EventArgs e)
{
    this.productsTableAdapter.Fill(this.nwindDataSet.Products);
    DataSource = this.nwindDataSet.Products.Take(20);

    this.radGridView1.TableElement.ViewInfo.TableAddNewRow.Height = 250;
    this.radGridView1.DataSource = this.nwindDataSet.Products;
    this.radGridView1.AutoSizeColumnsMode = Telerik.WinControls.UI.GridViewAutoSizeColumnsMode.Fill;
}

Public Shared DataSource As Object
Private Sub CreateCustomNewRow_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    Me.ProductsTableAdapter.Fill(Me.NwindDataSet.Products)
    DataSource = Me.NwindDataSet.Products.Take(20)
    Me.RadGridView1.TableElement.ViewInfo.TableAddNewRow.Height = 250
    Me.RadGridView1.DataSource = Me.NwindDataSet.Products
    Me.RadGridView1.AutoSizeColumnsMode = Telerik.WinControls.UI.GridViewAutoSizeColumnsMode.Fill
End Sub

In order to enlarge the new row's height, you can set the TableElement.ViewInfo.TableAddNewRow. Height property.

On the new row we will display a RadChartViewElement visualizing the Products data. For this purpose we should follow the steps below:

You can replace the RadChartViewElement with any RadElement or a set of elements.

Figure 1: The new row is replaced with the custom one

1. Create a descendant of the GridRowElement and override its CreateChildElements where you should add a single GridCellElement that contains the chart. The IsCompatible method determines for which GridViewRowInfo the custom row element is applicable:

• C#
• VB.NET

public class CustomGridRowElement : GridRowElement
{
    private GridCellElement cellElement;
    private RadChartElement radChartElement;

    public CustomGridRowElement()
    {
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        this.cellElement = new GridCellElement(null, this);
        this.cellElement.StretchHorizontally = true;
        this.cellElement.StretchVertically = true;
        this.Children.Add(cellElement);

        this.radChartElement = new RadChartElement();

        LineSeries series = new LineSeries();

        this.radChartElement.View.ShowSmartLabels = true;
        this.radChartElement.ShowLegend = true;
        this.radChartElement.View.Series.Add(series);
        this.cellElement.Children.Add(this.radChartElement);
        this.cellElement.ClipDrawing = true;

        series.CategoryMember = "CategoryID";
        series.ValueMember = "UnitPrice";
        series.DataSource = DataSource;
    }

    public override bool IsCompatible(GridViewRowInfo data, object context)
    {
        return data is CustomGridViewRowInfo;
    }
}

Public Class CustomGridRowElement
    Inherits GridRowElement
    Private cellElement As GridCellElement
    Private radChartElement As RadChartElement
    Public Sub New()
    End Sub
    Protected Overrides Sub CreateChildElements()
        MyBase.CreateChildElements()
        Me.cellElement = New GridCellElement(Nothing, Me)
        Me.cellElement.StretchHorizontally = True
        Me.cellElement.StretchVertically = True
        Me.Children.Add(cellElement)
        Me.radChartElement = New RadChartElement()
        Dim series As New LineSeries()
        Me.radChartElement.View.ShowSmartLabels = True
        Me.radChartElement.ShowLegend = True
        Me.radChartElement.View.Series.Add(series)
        Me.cellElement.Children.Add(Me.radChartElement)
        Me.cellElement.ClipDrawing = True
        series.CategoryMember = "CategoryID"
        series.ValueMember = "UnitPrice"
        series.DataSource = DataSource
    End Sub
    Public Overrides Function IsCompatible(data As GridViewRowInfo, context As Object) As Boolean
        Return TypeOf data Is CustomGridViewRowInfo
    End Function
End Class

2. Create a descendant of the GridViewNewRowInfo and specify that it uses the row element from the previous step by overriding its RowElementType property.

• C#
• VB.NET

public class CustomGridViewRowInfo : GridViewNewRowInfo
{
    public CustomGridViewRowInfo(GridViewInfo viewInfo) : base(viewInfo)
    {
    }

    public override Type RowElementType
    {
        get
        {
            return typeof(CustomGridRowElement);
        }
    }
}

Public Class CustomGridViewRowInfo
    Inherits GridViewNewRowInfo
    Public Sub New(viewInfo As GridViewInfo)
        MyBase.New(viewInfo)
    End Sub
    Public Overrides ReadOnly Property RowElementType() As Type
        Get
            Return GetType(CustomGridRowElement)
        End Get
    End Property
End Class

3. The last step is to subscribe to the CreateRowInfo event and replace the default GridViewNewRowInfo with your custom one.

You should subscribe to the CreateRowInfo event at design time in order to ensure that the event will be fired when a data row have to be created.

• C#
• VB.NET

private void radGridView1_CreateRowInfo(object sender, GridViewCreateRowInfoEventArgs e)
{
    if (e.RowInfo is GridViewNewRowInfo)
    {
        e.RowInfo = new CustomGridViewRowInfo(e.ViewInfo);
    }
}

Private Sub radGridView1_CreateRowInfo(sender As Object, e As GridViewCreateRowInfoEventArgs) Handles RadGridView1.CreateRowInfo
    If TypeOf e.RowInfo Is GridViewNewRowInfo Then
        e.RowInfo = New CustomGridViewRowInfo(e.ViewInfo)
    End If
End Sub