How to create custom column in the WPF details view DataGrid ?
In the WPF DataGrid, you can create your own columns apart from the predefined columns. To know more about creating custom columns in WPF, refer here and for WinRT, refer here. Likewise, you can also add custom columns in the DetailsViewDataGrid. To add custom columns to the DetailsViewDataGrid, you can use the following code.
XAML
<syncfusion:SfDataGrid Name="sfgrid"
AllowEditing="True"
AutoGenerateColumns="False"
AutoGenerateRelations="True"
ItemsSource="{Binding OrderInfoCollection}"
NavigationMode="Cell"
AllowGrouping="True"
ColumnSizer="Auto"
ShowGroupDropArea="True">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
<syncfusion:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID" />
<syncfusion:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name" />
<syncfusion:GridTextColumn MappingName="Country" HeaderText="Country" />
<syncfusion:GridTextColumn MappingName="ShipCity" HeaderText="Ship City" />
</syncfusion:SfDataGrid.Columns>
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="ProductDetails">
<syncfusion:GridViewDefinition.DataGrid>
<syncfusion:SfDataGrid x:Name="DetailsViewGrid"
AllowEditing="True"
AutoGenerateColumns="False"
NavigationMode="Cell">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn HeaderText="Order ID" MappingName="OrderID" />
<syncfusion:GridTextColumn HeaderText="Product Name" MappingName="ProductName" />
<!--custom column added to DetailsViewGrid-->
<local:DatePickerColumn AllowEditing="True"
DateMapping="Date"
DisplayBinding="{Binding DateOfMonth, Converter={StaticResource converter}}"
HeaderText="Date Picker column"
MappingName="Date" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</syncfusion:GridViewDefinition.DataGrid>
</syncfusion:GridViewDefinition>
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>
Like the SfDataGrid, you cannot directly add the custom renderer to the CellRenderers collection of the DataGrid (which is defined in the GridViewDefinition) as follows:
C#
if (!detailsviewGrid.CellRenderers.ContainsKey("DatePickerRenderer"))
detailsviewGrid.CellRenderers.Add("DatePickerRenderer", new DatePickerRenderer());
Since, CellRenderers are not copied to other DetailsViewDataGrids, you need to get the DetailsViewDataGrid from the DetailsViewExpanded event whenever the record is expanded and add the custom renderer to the CellRenderers collection of that DetailsViewDataGrid. Here, the DatePicker column is added to the DetailsViewDataGrid. You can refer to the following code example to add custom renderer to the DetailsViewDataGrid.
C#
this.sfgrid.DetailsViewExpanded += sfgrid_DetailsViewExpanded;
void sfgrid_DetailsViewExpanded(object sender, GridDetailsViewExpandedEventArgs e)
{
//Resolves row index from the record.
int rowindex = this.sfgrid.ResolveToRowIndex(e.Record);
//Resolves record index from the row index.
int recordindex = this.sfgrid.ResolveToRecordIndex(rowindex);
var detailsviewGrid = (sender as SfDataGrid).GetDetailsViewGrid(recordindex, "ProductDetails");
//Adds the customized renderer to the CellRenderers collection.
if (!detailsviewGrid.CellRenderers.ContainsKey("DatePickerRenderer"))
detailsviewGrid.CellRenderers.Add("DatePickerRenderer", new DatePickerRenderer());
}
By using the Record from the event argument, you can get the row index with the help of the ResolveToRowIndex method; and from the row index, you can get the record index. From the record index and relational column, you can get the current DetailsViewDataGrid by using the GetDetailsViewGrid method. And finally, you need to add the custom renderer, DatePickerRenderer, to the DetailsViewDataGrid renderer collection. In the following screenshot, custom column, that is DatePicker column, has been added to the DetailsViewDataGrid.
Figure 1: Custom DatePicker column added to the DetailsViewDataGrid (WPF)
Figure 2: Custom DatePicker column added to DetailsViewDataGrid (WinRT)
Conclusion
I hope you enjoyed learning about how to create Custom Column in the WPF DetailsViewDataGrid.
You can refer to our WPF DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
