|
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 <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) |
2X faster development
The ultimate UWP UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
