How to populate Syncfusion sfDataGrid with nested view?

Question

I have been trying for hours to manually populate the grid with a nested view, I have read the documentation but for some reason I can't get it to work. I can do it by setting the AutoGenerateRelations and AutoGenerateColumns to true. But I need to define the column header text manually since the names coming form the query are not user readable friendly.

Private Sub populateGrid(byval ds as DataSet)

             Dim ds As New DataSet()
             ds.Tables.Add(JORs)
             ds.Tables.Add(JORItems)

             ds.Relations.Add(New DataRelation("InventoryItems", ds.Tables(0).Columns("JORNo"), ds.Tables(1).Columns("JORNo")))
             SfDataGrid1.AutoGenerateRelations = True
             SfDataGrid1.AutoGenerateColumns = True
             SfDataGrid1.DataSource = ds

             'gridviewdefinition for datagrid
             Dim gridviewdefinition = New GridViewDefinition()
             gridviewdefinition.RelationalColumn = "InventoryItems"
             grididviewdefinition.DataGrid = New SfDataGrid() With {.Name = "firstlevelnestedgrid", .AutoGenerateColumns = False}
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "Doc ID", .HeaderText = "Doc ID"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "Doctype", .HeaderText = "Document Type"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "Crew", .HeaderText = "Crew"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "JORNo", .HeaderText = "JOR No"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "Salesman", .HeaderText = "Salesman"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "Company", .HeaderText = "Company"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "Well Name", .HeaderText = "Well Name"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "Description", .HeaderText = "Description"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "ScheduledDate", .HeaderText = "Shed Date"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "Status", .HeaderText = "Status"})
             
             Dim gridviewdefinition2 = New GridViewDefinition()
             gridviewdefinition2.RelationalColumn = "JORNo"
             gridviewdefinition2.DataGrid = New SfDataGrid() With {.Name = "secodlevelnestedgrid", .AutoGenerateColumns = False}
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "JORNo", .HeaderText = "JOR No"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "product", .HeaderText = "Product ID"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "description", .HeaderText = "Product Name"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "QTYHours", .HeaderText = "QTY Hours"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "rate", .HeaderText = "Rate"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "cost", .HeaderText = "Cost"})
             SfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "partNo", .HeaderText = "Part Number"})
                                     
             SfDataGrid1.DetailsViewDefinitions.Add(gridviewdefinition)
             SfDataGrid1.DetailsViewDefinitions.Add(gridviewdefinition2)
            
      End Sub

Answer 1

Approach 1:

You can modify the column header text for both the parent DataGrid and the DetailsView DataGrid when AutoGenerateColumns and AutoGenerateRelations are set to true by handling the AutoGeneratingColumn event. Here is an example code snippet:

Dim DataSource As DataTable = GetDataTable()
sfDataGrid1.AutoGenerateColumns = True
sfDataGrid1.AutoGenerateRelations = True
sfDataGrid1.AutoGeneratingColumn += SfDataGrid1_AutoGeneratingColumn
sfDataGrid1.AutoGeneratingRelations += SfDataGrid1_AutoGeneratingRelations
sfDataGrid1.DataSource = DataSource

Private Sub SfDataGrid1_AutoGeneratingColumn(ByVal sender As Object, ByVal 
e As Syncfusion.WinForms.DataGrid.Events.AutoGeneratingColumnArgs)
    'Here you can set your own column name based on its mapping name for 
    'Parent DataGrid
   If e.Column.MappingName = "JORNo" Then 
     e.Column.HeaderText = "Changed Name"
End Sub

Private Sub SfDataGrid1_AutoGeneratingRelations(ByVal sender As Object, 
ByVal e As 
Syncfusion.WinForms.DataGrid.Events.AutoGeneratingRelationsEventArgs)
       'In the DetailsViewDataGrid we should wire the AutoGeneratingColumn 
       'event for details grid.
   e.GridViewDefinition.DataGrid.AutoGeneratingColumn += 
   DataGrid_AutoGeneratingColumn
 End Sub

Private Sub DataGrid_AutoGeneratingColumn(ByVal sender As Object, ByVal e 
As Syncfusion.WinForms.DataGrid.Events.AutoGeneratingColumnArgs)
    'Here you can set your own column name based on its mapping name for                
    'Details View DataGrid
    If e.Column.MappingName = "JORNo" Then 
       e.Column.HeaderText = "Changed Name"
 End Sub

Approach 2:

You can change the HeaderText of the columns by manually adding the columns to the DataGrid when the AutoGenerateColumns and AutoGenerateRelations properties are set to false.

this.sfDataGrid1.AutoGenerateRelations = false;
this.sfDataGrid1.AutoGenerateColumns = false;

'columns for Parent Grid 

sfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "Doc ID", 
.HeaderText = "Doc ID"})
sfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = 
"Doctype", .HeaderText = "Document Type"})
sfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "Crew", 
.HeaderText = "Crew"})
sfDataGrid1.Columns.Add(New GridTextColumn() With {.MappingName = "JORNo", 
.HeaderText = "JOR No"})

Dim jORgridviewdefinition = New GridViewDefinition()
'Set the Relation here
jORgridviewdefinition.RelationalColumn = "JORNo"
Dim childGrid As SfDataGrid = New SfDataGrid()
childGrid.AllowResizingColumns = True
childGrid.AutoGenerateColumns = False

childGrid.Columns.Add(New GridTextColumn() With {.MappingName = "JORNo", 
.HeaderText = "JOR No"})
childGrid.Columns.Add(New GridTextColumn() With {.MappingName = "QTYHours", 
.HeaderText = "QTY Hours"})

jORgridviewdefinition.DataGrid = childGrid
'Add your relational definition to the datagrid ie. ParentGrid.
Me.sfDataGrid1.DetailsViewDefinitions.Add(jORgridviewdefinition)