How to create Custom Column in the DetailsViewDataGrid?

In the SfDataGrid, 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

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#

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#

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)

Samples

WPF

WinRT

UWP