RadControls for WinForms
Contents

RELATED VIDEOS

RadGridView for WinForms Hierarchy Overview

In this video you will learn the various ways you can display hierarchical data in a RadGridView. (Runtime: 12:13)

gridview-hierarchical-grid-binding-to-hierarchical-data-programmatically 001

There are many cases when you wouldn't want to include the whole dataset and hierarchy in your application. In such cases you cannot use the automatical mode for hierarchical databinding and you will need to set up the hierarchy in code manually.

Setting the hierarchical grid in bound mode

For setting the hierarchy, you will need the special GridViewRelation class, which defines the related field in parent and child tables. Consider the sample below:

Copy[C#] Setting the hierarchical grid in bound mode
private void BindingToHierarchicalGridProgramatically_Load(object sender, EventArgs e)
{
    this.productsTableAdapter.Fill(this.nwindDataSet.Products);
    this.suppliersTableAdapter.Fill(this.nwindDataSet.Suppliers);

    radGridView1.DataSource = nwindDataSet.Suppliers;

    GridViewTemplate template = new GridViewTemplate();
    template.DataSource = nwindDataSet.Products;
    radGridView1.MasterTemplate.Templates.Add(template);

    GridViewRelation relation = new GridViewRelation(radGridView1.MasterTemplate);
    relation.ChildTemplate = template;
    relation.RelationName = "SuppliersProducts";
    relation.ParentColumnNames.Add("SupplierID");
    relation.ChildColumnNames.Add("SupplierID");
    radGridView1.Relations.Add(relation);
}
Copy[VB.NET] Setting the hierarchical grid in bound mode
Private Sub BindingToHierarchicalGridProgramatically_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    Me.SuppliersTableAdapter.Fill(Me.NwindDataSet.Suppliers)
    Me.ProductsTableAdapter.Fill(Me.NwindDataSet.Products)

    RadGridView1.DataSource = NwindDataSet.Suppliers

    Dim template As New GridViewTemplate()
    template.DataSource = NwindDataSet.Products
    RadGridView1.MasterTemplate.Templates.Add(template)

    Dim relation As New GridViewRelation(RadGridView1.MasterTemplate)
    relation.ChildTemplate = template
    relation.RelationName = "SuppliersProducts"
    relation.ParentColumnNames.Add("SupplierID")
    relation.ChildColumnNames.Add("SupplierID")
    RadGridView1.Relations.Add(relation)
End Sub

You can also set the relation in design-time, using the provided collection editor as in the screenshot below:

Hierarchical Grid in Unbound mode

Setting the hierarchical grid in unbound mode is quite similar to that for the bound mode with only difference is setting the unbound mode itself. First of all you need to create and the columns you need. After that set up the relation and finally load the data.

Copy[C#] Creating hierarchical grid in unbound mode
public void creatingHierarchicalGridInUnboundMode()
{
    //setup the master template
    GridViewImageColumn column = new GridViewImageColumn("Photo");
    column.ImageLayout = ImageLayout.Stretch;
    radGridView1.MasterTemplate.Columns.Add(column);
    GridViewTextBoxColumn textColumn = new GridViewTextBoxColumn("Name");
    textColumn.Width = 150;
    radGridView1.MasterTemplate.Columns.Add(textColumn);
    radGridView1.MasterTemplate.Columns.Add(new GridViewDecimalColumn("Salary"));
    GridViewDateTimeColumn dateTimeColumn = new GridViewDateTimeColumn("Hire Date");
    dateTimeColumn.Width = 100;
    dateTimeColumn.TextAlignment = ContentAlignment.MiddleCenter;
    radGridView1.MasterTemplate.Columns.Add(dateTimeColumn);
    textColumn = new GridViewTextBoxColumn("Title");
    textColumn.Width = 150;
    radGridView1.MasterTemplate.Columns.Add(textColumn);
    radGridView1.MasterTemplate.Columns.Add(new GridViewCheckBoxColumn("Active"));
    radGridView1.MasterTemplate.Columns.Add(new GridViewCommandColumn("Action"));

    //setup the child template
    GridViewTemplate template = new GridViewTemplate();
    template.AllowAddNewRow = true;
    template.Columns.Add(new GridViewTextBoxColumn("Name"));
    template.Columns.Add(new GridViewTextBoxColumn("Product Number"));
    template.Columns.Add(new GridViewDecimalColumn("Quantity"));
    template.Columns.Add(new GridViewDecimalColumn("Discount"));
    template.Columns.Add(new GridViewDecimalColumn("Total"));
    radGridView1.MasterTemplate.Templates.Add(template);

    //create the relation
    GridViewRelation relation = new GridViewRelation(radGridView1.MasterTemplate);
    relation.ChildTemplate = template;
    relation.RelationName = "EmployeesOrders";
    relation.ParentColumnNames.Add("Name");
    relation.ChildColumnNames.Add("Name");
    radGridView1.Relations.Add(relation);

    //load data
    LoadUnboundData();
}

private void LoadUnboundData()
{
    using (radGridView1.DeferRefresh())
    {
        for (int i = 0; i < nwindDataSet.Employees.Count; i++)
        {
            Random random = new Random((int)DateTime.Now.Ticks);
            NwindDataSet.EmployeesRow row = nwindDataSet.Employees[i];
            string name = row.FirstName + " " + row.LastName;
            radGridView1.MasterTemplate.Rows.Add(GetImageFromData(row.Photo), name, random.Next(45000), row.HireDate, row.Title, (random.Next(100) > 50), "View");
            GridViewTemplate template = radGridView1.MasterTemplate.Templates[0];
            int rowCount = random.Next(20);
            for (int j = 0; j < rowCount; j++)
            {
                template.Rows.Add(name, random.Next(1000), random.Next(50), random.Next(100), random.Next(10000));
            }
        }
    }
}


private Image GetImageFromData(byte[] imageData)
{

    const int OleHeaderLength = 78;

    MemoryStream memoryStream = new MemoryStream();

    if (HasOleContainerHeader(imageData))
    {

        memoryStream.Write(imageData, OleHeaderLength, imageData.Length - OleHeaderLength);

    }

    else
    {

        memoryStream.Write(imageData, 0, imageData.Length);

    }

    Bitmap bitmap = new Bitmap(memoryStream);

    return bitmap.GetThumbnailImage(55, 65, null, new IntPtr());

}

private bool HasOleContainerHeader(byte[] imageByteArray)
{

    const byte OleByte0 = 21;

    const byte OleByte1 = 28;

    return (imageByteArray[0] == OleByte0) && (imageByteArray[1] == OleByte1);

}
Copy[VB.NET] Creating hierarchical grid in unbound mode
Public Sub creatingHierarchicalGridInUnboundMode()
    'setup the master template
    Dim column As New GridViewImageColumn("Photo")
    column.ImageLayout = ImageLayout.Stretch
    RadGridView1.MasterTemplate.Columns.Add(column)
    Dim textColumn As New GridViewTextBoxColumn("Name")
    textColumn.Width = 150
    RadGridView1.MasterTemplate.Columns.Add(textColumn)
    RadGridView1.MasterTemplate.Columns.Add(New GridViewDecimalColumn("Salary"))
    Dim dateTimeColumn As New GridViewDateTimeColumn("Hire Date")
    dateTimeColumn.Width = 100
    dateTimeColumn.TextAlignment = ContentAlignment.MiddleCenter
    RadGridView1.MasterTemplate.Columns.Add(dateTimeColumn)
    textColumn = New GridViewTextBoxColumn("Title")
    textColumn.Width = 150
    RadGridView1.MasterTemplate.Columns.Add(textColumn)
    RadGridView1.MasterTemplate.Columns.Add(New GridViewCheckBoxColumn("Active"))
    RadGridView1.MasterTemplate.Columns.Add(New GridViewCommandColumn("Action"))

    'setup the child template
    Dim template As New GridViewTemplate()
    template.AllowAddNewRow = True
    template.Columns.Add(New GridViewTextBoxColumn("Name"))
    template.Columns.Add(New GridViewTextBoxColumn("Product Number"))
    template.Columns.Add(New GridViewDecimalColumn("Quantity"))
    template.Columns.Add(New GridViewDecimalColumn("Discount"))
    template.Columns.Add(New GridViewDecimalColumn("Total"))
    RadGridView1.MasterTemplate.Templates.Add(template)

    'create the relation
    Dim relation As New GridViewRelation(RadGridView1.MasterTemplate)
    relation.ChildTemplate = template
    relation.RelationName = "EmployeesOrders"
    relation.ParentColumnNames.Add("Name")
    relation.ChildColumnNames.Add("Name")
    RadGridView1.Relations.Add(relation)

    'load data
    LoadUnboundData()
End Sub

Private Sub LoadUnboundData()
    Using RadGridView1.DeferRefresh()
        For i As Integer = 0 To NwindDataSet.Employees.Count - 1
            Dim now As Long = Date.Now.Ticks
            Dim seed As Integer = CType(now And Integer.MaxValue, Integer)
            Dim random As New Random(seed)
            Dim row As NwindDataSet.EmployeesRow = NwindDataSet.Employees(i)
            Dim name As String = row.FirstName & " " & row.LastName
            RadGridView1.MasterTemplate.Rows.Add(GetImageFromData(row.Photo), name, random.Next(45000), row.HireDate, row.Title, (random.Next(100) > 50), "View")
            Dim template As GridViewTemplate = RadGridView1.MasterTemplate.Templates(0)
            Dim rowCount As Integer = random.Next(20)
            For j As Integer = 0 To rowCount - 1
                template.Rows.Add(name, random.Next(1000), random.Next(50), random.Next(100), random.Next(10000))
            Next j
        Next i
    End Using
End Sub


Private Function GetImageFromData(ByVal imageData() As Byte) As Image

    Const OleHeaderLength As Integer = 78

    Dim memoryStream As New MemoryStream()

    If HasOleContainerHeader(imageData) Then

        memoryStream.Write(imageData, OleHeaderLength, imageData.Length - OleHeaderLength)


    Else

        memoryStream.Write(imageData, 0, imageData.Length)

    End If

    Dim bitmap As New Bitmap(memoryStream)

    Return bitmap.GetThumbnailImage(55, 65, Nothing, New IntPtr())

End Function

Private Function HasOleContainerHeader(ByVal imageByteArray() As Byte) As Boolean

    Const OleByte0 As Byte = 21

    Const OleByte1 As Byte = 28

    Return (imageByteArray(0) = OleByte0) AndAlso (imageByteArray(1) = OleByte1)

End Function