- Overview
- Defining the Master-DetailsView
- Expand or Collapse Master-Details View
- Limitations
- Master-Detail View from Collection property
- Populate through Events
- Refresh UI when adding the Child Grid records to the SfDataGrid
- Customize columns in the Master-Detail view
- Handle events for the Master-Detail View
- Set properties for the Master-Detail View
- Get the SelectedItem in the DetailsViewGrid
- Override selection controller in the DetailsViewDataGrid
Master-Details View
This section explains the SfDataGridMaster-DetailsView Support, creation of the Master-Details View by using the DataTableRelation and Collection property and Events associated with the Master-Details View.
Overview
The SfDataGrid displays hierarchical data in the form of nested tables. In a Hierarchical view, each record in the parent table has an associated set of records in the child table. Every record in the parent table contains an Expander button in the SfDataGrid that can be expanded or collapsed to show or hide the underlying records in the child table. The number of tables nested with relations by using a SfDataGrid control is unlimited.
Defining the Master-DetailsView
The SfDataGrid provides the following properties to define the Master-Details relation:
- DetailsViewDefinition: It manages the entire Master-Details relations for the SfDataGrid, and this property is an Observable collection of the ViewDefinition objects.
- AutoGenerateRelations: The SfDataGrid automatically detects the data relations in a data set to display. By default, a relation is created for each data in the data set. So, the data relations defined in a data set is sufficient for the SfDataGrid.
The event that participates in creation of Master-DetailsView is the AutoGeneratingRelations that rises when the AutoGenerateRelations is set to true. The AutoGeneratingRelations event handler receives two arguments, namely sender that is the SfDataGrid and the AutoGeneratingRelationsArgs that are handled as objects.
The AutoGeneratingRelationsArgs object contains the following list of properties.
- GridViewDefinition: This property customizes column behaviors such as filtering, sorting, editing, validation, resizing, and deleting.
- Cancel: You can cancel the creation of the Master-DetailsView by setting this property to true.
You can use this event to stop creating relation for a parent row. The following code example illustrates how to cancel the creation.
dataGrid.AutoGeneratingRelations += dataGrid_AutoGeneratingRelations;
void dataGrid_AutoGeneratingRelations(object sender, Syncfusion.UI.Xaml.Grid.AutoGeneratingRelationsArgs e)
{
e.Cancel = true;
}The GridViewDefinition element displays the SfDataGrid control as nested row element that derives from the ViewDefinition. It has the following properties:
- RelationalColumn: Gets or sets the property name that is assigned to the ItemsSource for the details view.
- DataGrid: The GridViewDefinition has the DataGrid property. You can set properties for the Master-DetailsGrid by using this DataGrid.
In addition, the GridViewDefinition supports the following list of properties in the DataGrid:
- DataGrid.HideEmptyGridViewDefinition: Hides the expander from the data row when ItemsSource of Details View is empty.
- DataGrid.SelectedDetailsViewGrid: Gets the selected Details View DataGrid.
- DataGrid.DetailsViewPadding: Gets or sets the padding data row and the Details View DataGrid.
The following code example illustrates how to define the GridViewDefinition.
<syncfusion:SfDataGrid x:Name="dataGrid"
HideEmptyGridViewDefinition="True"
ItemsSource="{Binding Path=OrdersDetails}"
NavigationMode="Cell"
ShowGroupDropArea="True">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="OrderDetails">
<syncfusion:GridViewDefinition.DataGrid>
<syncfusion:SfDataGrid x:Name="FirstDetailsViewGrid">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn HeaderText="Order ID" MappingName="OrderID" />
<syncfusion:GridTextColumn HeaderText="Customer ID" MappingName="CustomerID" />
<syncfusion:GridTextColumn HeaderText="Product ID"
MappingName="ProductID"
/>
<syncfusion:GridTextColumn HeaderText="Unit Price"
MappingName="UnitPrice"
/>
<syncfusion:GridTextColumn MappingName="Quantity" />
<syncfusion:GridNumericColumn MappingName="Discount" TextAlignment="Right" />
<syncfusion:GridTextColumn HeaderText="Order Date"
MappingName="OrderDate"
/>
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</syncfusion:GridViewDefinition.DataGrid>
</syncfusion:GridViewDefinition>
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>
NOTE
In the GridViewDefinition, when you make changes in one child DataGrid, changes are applied to all the child DataGrids at that level. For example, when you resize the first column in the child DataGrid, the same column width is applied to all the child DataGrids at that level. This scenario is applicable for features like filtering, sorting, validation, and ReOrdering columns. You can use stacked headers also in the Master-Detail View.
The following topics explain different methods available to expand or collapse and events to handle during expanding or collapsing. You can use these methods and events to perform your internal operation like stores details view items source or record.
Expand or Collapse Master-Details View
The following lists of methods expand or collapse records.
- ExpandAllDetailsView(): Expands all the records in the Details View of the DataGrid.
- CollapseAllDetailsView(): Collapses all the records in the Details View of the DataGrid.
- ExpandDetailsViewAt(int recordIndex): Expands the Details View at the specified record index.
- CollapseDetailsViewAt(int recordIndex): Collapses the Details View at the specified record index.
The SfDataGrid provides the following events to expand or collapse the Master–Details View:
- DetailsViewExpanding: Occurs before expanding the Details View by using the Expander button.
- DetailsViewExpanded: Occurs after expanding the Details View by using the Expander button.
- DetailsViewCollapsing: Occurs before collapsing the Details View by using the Expander button.
- DetailsViewCollapsed: Occurs after collapsing the Details View by using the Expander button.
The SfDataGrid also provides the following events when the DetailsViewDataGrid gets loaded and unloaded.
- DetailsViewLoading: Fired when the DetailsViewDataGrid is loading in the view. When the record is expanded and ExpandAllDetailsView method is called, this event is fired for each DetailsViewDataGrid that is loading in view. After calling the ExpandAllDetailsView method, some DetailsViewDataGrids may not be currently in view. For these DetailsViewDataGrids, this event is fired when it brings into view.
- DetailsViewUnloading: Fired when the DetailsViewDataGrid is unloading from view. The DetailsViewDataGrid is unloaded when the grid is scrolled out of view and also when the particular DetailsViewDataGrid is collapsed.
DetailsViewExpanding Event
The DetailsViewExpandingEvent handler receives two arguments, namely sender that is SfDataGrid and GridDetailsViewExpandingEventArgs that are handled as objects. The GridDetailsViewExpandingEventArgs object contains the following properties:
- Cancel: When this property is set to true, the event is canceled and the Details View is not expanded.
- Record: Gets the row data.
- DetailsViewItemsSource: It is a dictionary of strings and IEnumerable objects that hold the Relational Column, its key, and the ItemsSource as its value.
When you do not want a particular parent row expanded, then you can wire this event and do it by checking the value from the record property and Cancel it.
void dataGrid_DetailsViewExpanding(object sender, GridDetailsViewExpandingEventArgs e)
{
if((e.Record as OrderInfo).OrderID == 1002)
e.Cancel = true;
}DetailsViewExpanded Event
The DetailsViewExpanded event handler receives two arguments namely sender that is SfDataGrid and GridDetailsViewExpandedEventArgs that are handled as objects. The GridDetailsViewExpandedEventArgs object contains the following properties:
- Record: Gets the row data.
- DetailsViewItemsSource: It is a dictionary of strings and IEnumerable objects that hold the Relational Column, its key, and the ItemsSource as its value.
DetailsViewCollapsing Event
The DetailsViewCollapsing event handler receives two arguments namely sender that is SfDataGrid and GridDetailsViewCollapsingEventArgs are handled as objects. The GridDetailsViewCollapsingEventArgs object contains the following properties:
- Cancel: When this property is set to ‘true’, the event is canceled and the Details View are not expanded.
- Record: Gets the row data.
When you want to avoid collapsing of the parent row, then you can wire this event and check value from the record property and Cancel it.
void dataGrid_DetailsViewCollapsing(object sender,
GridDetailsViewCollapsingEventArgs e)
{
if ((e.Record as OrderInfo).OrderID == 1002)
e.Cancel = true;
}DetailsViewCollapsed Event
The DetailsViewCollapsed event handler receives two arguments namely sender that isSfDataGrid and GridDetailsViewCollapsedEventArgs that are handled as objects. The GridDetailsViewCollapsedEventArgs object contains the following property:
- Record: Gets the row data.
You can wire those events from the XAML or Code-Behind. For example:
<syncfusion:SfDataGrid x:Name="dataGrid"
AllowEditing="True"
AutoGenerateColumns="True"
ColumnSizer="Star"
DetailsViewExpanding="dataGrid_DetailsViewExpanding"
ItemsSource="{Binding OrderInfoCollection}">dataGrid.DetailsViewExpanding += dataGrid_DetailsViewExpanding;DetailsViewLoading Event
The DetailsViewLoading Event handler receives two arguments, namely sender that is SfDataGrid and DetailsViewLoadingAndUnloadingEventArgs. The DetailsViewLoadingAndUnloadingEventArgs object contains the following property:
- DetailsViewDataGrid: The DetailsViewDataGrid is loaded in the view.
By accessing the DetailsViewDataGrid, you can set the Custom Renderers, Custom SelectionController, ResizingController, GridColumnDragDropController, and GridColumnSizer to the DetailsViewDataGrid.
this.grid.DetailsViewLoading += grid_DetailsViewLoading;
void grid_DetailsViewLoading(object sender, DetailsViewLoadingAndUnloadingEventArgs e)
{
// Assigns Custom Selection Controller for the DetailsViewDataGrid.
e.DetailsViewDataGrid.SelectionController = new CustomSelectionController(e.DetailsViewDataGrid);
}It is not preferable to change the value of the public properties like AllowFiltering, AllowSorting, SelectionUnit, AllowDeleting, etc., from this event argument. You can set the value for these properties in the RootDataGrid itself (defined in the GridViewDefinition) as follows.
<syncfusion:SfDataGrid x:Name="dataGrid"
AutoGenerateColumns="True"
ColumnSizer="Star"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="ProductDetails">
<syncfusion:GridViewDefinition.DataGrid>
<syncfusion:SfDataGrid x:Name="DetailsView"
AllowDeleting="True"
AllowEditing="True"
AllowFiltering="True"
AllowGrouping="True"
AllowSorting="True"
AutoGenerateColumns="False">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn MappingName="OrderID" />
<syncfusion:GridTextColumn MappingName="ProductName" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</syncfusion:GridViewDefinition.DataGrid>
</syncfusion:GridViewDefinition>
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>
</Window>DetailsViewUnloading Event
The DetailsViewUnloading Event handler receives two arguments, namely sender that is SfDataGrid and the DetailsViewLoadingAndUnloadingEventArgs.The DetailsViewLoadingAndUnloadingEventArgs object contains the following property:
- DetailsViewDataGrid : The DetailsViewDataGrid is unloaded from view.
this.grid.DetailsViewUnloading += grid_DetailsViewUnloading;
void grid_DetailsViewUnloading(object sender, DetailsViewLoadingAndUnloadingEventArgs e)
{
}Limitations
There are some limitations in the Master-DetailsView. Those are:
- It does not have the AddNewRow support.
- It does not support Details view Serialization.
- It does not have support binding SelectedItem, CurrentItem.
- GroupDropArea element is not available for details view grid.
NOTE
You can use the GroupColumnDescriptions to group the column in the Master-Details View.
There is an extension method namely the GetDetailsViewGrid that gets the DetailsViewGrid. It has two parameters.
- RecordIndex: Currently selected parent record index.
2.RelationalColumn: RelationalColumn name that creates Master-Details View relationships.
var recordIndex = dataGrid.ResolveToRecordIndex(dataGrid.SelectionController.CurrentCellManager.CurrentCellIndex.RowIndex);
SfDataGrid grid=dataGrid.GetDetailsViewGrid(recordIndex, "ProductDetails");NOTE
The Master-Details View has static property, AllowDisposeCollectionView to utilize memory. The following code example illustrates the property.
Syncfusion.UI.Xaml.Grid.DetailsViewManager.AllowDisposeCollectionView = true;When you set the AllowDisposeCollectionView to true, the expanded details view Grid’s CollectionView is disposed from memory when you scroll a particular row from view port.
Master-Detail View from Collection property
Master-Detail View also called the Hierarchical or Nested Grid is used to display Master-Details relationship and collection properties in Business model in a hierarchical (Tree) structure. This section explains in simple steps how to create Master-Details View DataGrid to display the Collection properties present in the Business Model.
1.Create a New WinRT Project in the Visual Studio.
2.Add the required assemblies as mentioned in the Getting Started section.
3.Now, create DataSource.
-
Create a business model with the Collection property. This value is displayed in a separate Grid under the parent record in the Grid.
-
In the following code example, OrderInfo business class directly binds to the SfDataGrid and it has the ProductDetails property of type List
. ProductDetails are not displayed in the Grid like other properties. You can display the ProductDetails property collection in a separate Grid under the OrderInfo record in the Grid by using the NestedGrid. Add the following code example in a newly created class file and save it as OrderInfo.cs.
public class OrderInfo
{
int orderID;
string customerId;
string country;
string customerName;
string shippingCity;
List<ProductInfo> productDetails;
public int OrderID
{
get { return orderID; }
set { orderID = value; }
}
public string CustomerID
{
get { return customerId; }
set { customerId = value; }
}
public string CustomerName
{
get { return customerName; }
set { customerName = value; }
}
public string Country
{
get { return country; }
set { country = value; }
}
public string ShipCity
{
get { return shippingCity; }
set { shippingCity = value; }
}
public List<ProductInfo> ProductDetails
{
get { return productDetails; }
set { productDetails = value; }
}
public OrderInfo(int orderId, string customerName, string country, string
customerId, string shipCity, List<ProductInfo> productDetails)
{
this.OrderID = orderId;
this.CustomerName = customerName;
this.Country = country;
this.CustomerID = customerId;
this.ShipCity = shipCity;
this.ProductDetails = productDetails;
}
}The ProductDetails that return Product Info collection defined as normal property in the parent collection is the Child Collection.
Add the following code example in a newly created class file and save it as ProductInfo.cs file.
public class ProductInfo
{
int orderId;
string productName;
public int OrderID
{
get { return orderId; }
set { orderId = value; }
}
public string ProductName
{
get { return productName; }
set { productName = value; }
}
}NOTE
Both parent collection and child collection have the key property, OrderID.
-
Now, load data for prepared collection.
Add the following code example in a newly created class file and save it as OrderInfoRepository.cs file.
public class OrderInfoRepository
{
ObservableCollection<OrderInfo> orderCollection;
public ObservableCollection<OrderInfo> OrderInfoCollection
{
get { return orderCollection; }
set { orderCollection = value; }
}
public OrderInfoRepository()
{
orderCollection = new ObservableCollection<OrderInfo>();
this.GenerateProducts();
OrderInfoCollection = GenerateOrders();
}
public ObservableCollection<OrderInfo> GenerateOrders()
{
ObservableCollection<OrderInfo> orders = new ObservableCollection<OrderInfo>();
orders.Add(new OrderInfo(1001, "Maria Anders", "Germany", "ALFKI", "Berlin", GetOrder(1001)));
orders.Add(new OrderInfo(1002, "Ana Trujillo", "Mexico", "ANATR", "Mexico D.F.", GetOrder(1002)));
orders.Add(new OrderInfo(1003, "Antonio Moreno", "Mexico", "ANTON", "Mexico D.F.", GetOrder(1003)));
orders.Add(new OrderInfo(1004, "Thomas Hardy", "UK", "AROUT", "London", GetOrder(1004)));
orders.Add(new OrderInfo(1005, "Christina Berglund", "Sweden", "BERGS", "Lula", GetOrder(1005)));
orders.Add(new OrderInfo(1006, "Hanna Moos", "Germany", "BLAUS", "Mannheim", GetOrder(1006)));
orders.Add(new OrderInfo(1007, "Frederique Cite", "France", "BLONP", "Strasbourg", GetOrder(1007)));
orders.Add(new OrderInfo(1008, "Martin", "Spain", "BOLID", "Madrid", GetOrder(1008)));
orders.Add(new OrderInfo(1009, "Laurence", "France", "BONAP", "Marseille", GetOrder(1009)));
orders.Add(new OrderInfo(1010, "Elizabeth Lincoln", "Canada", "BOTTM", "Tsawassen", GetOrder(1010)));
return orders;
}
List<ProductInfo> prod = new List<ProductInfo>();
public void GenerateProducts()
{
prod.Add(new ProductInfo() { OrderID = 1001, ProductName = "Laptop" });
prod.Add(new ProductInfo() { OrderID = 1001, ProductName = "Mobile" });
prod.Add(new ProductInfo() { OrderID = 1001, ProductName = "HeadSet" });
prod.Add(new ProductInfo() { OrderID = 1002, ProductName = "FootWear" });
prod.Add(new ProductInfo() { OrderID = 1002, ProductName = "Bags" });
prod.Add(new ProductInfo() { OrderID = 1002, ProductName = "DataCard" });
prod.Add(new ProductInfo() { OrderID = 1003, ProductName = "TV" });
prod.Add(new ProductInfo() { OrderID = 1003, ProductName = "Fridge" });
prod.Add(new ProductInfo() { OrderID = 1004, ProductName = "Watch" });
prod.Add(new ProductInfo() { OrderID = 1004, ProductName = "Bike" });
prod.Add(new ProductInfo() { OrderID = 1005, ProductName = "Car" });
prod.Add(new ProductInfo() { OrderID = 1005, ProductName = "CPU" });
prod.Add(new ProductInfo() { OrderID = 1005, ProductName = "KeyBoard" });
prod.Add(new ProductInfo() { OrderID = 1006, ProductName = "Books" });
prod.Add(new ProductInfo() { OrderID = 1006, ProductName = "PenDrive" });
prod.Add(new ProductInfo() { OrderID = 1007, ProductName = "Camera" });
prod.Add(new ProductInfo() { OrderID = 1008, ProductName = "MP3" });
prod.Add(new ProductInfo() { OrderID = 1008, ProductName = "DeskTop" });
prod.Add(new ProductInfo() { OrderID = 1008, ProductName = "MemoryCard" });
}
public List<ProductInfo> GetOrder(int i)
{
List<ProductInfo> product = new List<ProductInfo>();
foreach (var or in prod)
if (or.OrderID == i)
product.Add(or);
return product;
}
}2.Now open the XAML page in your application. Add the names space for the SfDataGrid and create a simple application with the SfDataGrid.
3.The SfDataGrid.DetailsViewDefinition creates the Master-Detail DataGrid and the RelationalColumn property is used to associate ChildGrid data with the Parent Grid Data.
4.Create details of ViewGrid as given in the following code example. As in the main Grid, you can also create columns for ChildGrid. There are some limitations for the DetailsViewGrid that are referred by using the Master-Details View section.
<Page x:Class="SimpleApplication.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SimpleApplication"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Grid"
Title="MainWindow"
Width="525"
Height="350">
<Page.DataContext>
<local:OrderInfoRepository />
</Page.DataContext>
<syncfusion:SfDataGrid AutoGenerateColumns="True"
ColumnSizer="Star"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="ProductDetails" />
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>
</Page>5.Run the application; Grid is loaded with the Master Details Grid. Click the first record’s expander to render the following output.
How To
Populate through Events
By handling the DetailsViewExpanding event, you can populate the Nested Grid with a new ItemsSource or you can modify the existing ItemsSource. To achieve this, you have to set the ItemsSource by using the DetailsViewItemsSource property. The following code example illustrates this.
<syncfusion:SfDataGrid x:Name="dataGrid"
ItemsSource="{Binding Path=OrdersDetails}"
NavigationMode="Cell"
ShowGroupDropArea="True">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="Details" />
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>private void DataGrid_DetailsViewExpanding(object sender, GridDetailsViewExpandingEventArgs e)
{
e.DetailsViewItemsSource.Clear();
var orderInfo = e.Record as OrderInfo;
var itemSource = this.OrdersDetails.Where(customer => customer.OrderID ==
orderInfo.OrderID);
e.DetailsViewItemsSource.Add("Details", itemSource);
}Refresh UI when adding the Child Grid records to the SfDataGrid
When you set the HideEmptyGridViewDefinition to False and add the items to the DetailsView during run time, it does not show the DetailsViewExpander until the SfDataGrid is refreshed. You can refresh the particular row alone instead of refreshing the entire SfDataGrid by using the UpdateDataRow (int rowIndex) method. To access this method you can include the Syncfusion.UI.Xaml.Grid.Helpers namespace.
The UpdateDataRow method has record index or record as a parameter to update that particular row. You can include the Syncfusion.UI.Xaml.Grid namespace to access the ResolveToRowIndex(object item) method. The method, ResolveToRowIndex resolves index to refresh the SfDataGrid.
The following code example shows how to add the item to the DetailsView in a Button Click.
private void AddItem(object sender, RoutedEventArgs e)
{
var Item = DataContext as ViewModel;
var source = Item.OrdersDetails.Where(data => data.OrderID == 10004).Single();
var additem1 = new List<OrderDetails>();
additem1.Add(new OrderDetails(12, 50, 20, 12,8.0, "XYZ", new DateTime(2013, 12, 12)));
source.OrderDetails=additem1;
this.dataGrid.UpdateDataRow(dataGrid.ResolveToRowIndex(source));
}Customize columns in the Master-Detail view
The Master-Details View Grid has the GridViewDefinition property that contains the DataGrid property. The DataGrid has a return type of the SfDataGrid. You can get the DetailsGrid by using this property. The following code example explains how to do columns customization in XAML.
<syncfusion:SfDataGrid x:Name="dataGrid"
AutoGenerateColumns="True"
ColumnSizer="Star"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="ProductDetails">
<syncfusion:GridViewDefinition.DataGrid>
<syncfusion:SfDataGrid x:Name="DetailsView" AutoGenerateColumns="False">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn MappingName="OrderID" />
<syncfusion:GridTextColumn MappingName="ProductName" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</syncfusion:GridViewDefinition.DataGrid>
</syncfusion:GridViewDefinition>
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>The following code example explains how to customize column in code-behind.
<syncfusion:SfDataGrid x:Name="dataGrid"
AutoGenerateColumns="True"
ColumnSizer="Star"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="ProductDetails">
<syncfusion:GridViewDefinition.DataGrid>
<syncfusion:SfDataGrid x:Name="DetailsView" AutoGenerateColumns="False" />
</syncfusion:GridViewDefinition.DataGrid>
</syncfusion:GridViewDefinition>
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>this.DetailsView.Columns.Add(new GridTextColumn() { MappingName = "OrderID",AllowFiltering="True" });
this.DetailsView.Columns.Add(new GridTextColumn() { MappingName = "ProductName",AllowFiltering="True" });You can customize columns in the AutoGeneratingRelations event, where you can also get the GridViewDefinition from the AutoGeneratingRelationsArgs. You can wire that event and customize columns within that event. The following code example explains how to customize the columns.
dataGrid.AutoGeneratingRelations += dataGrid_AutoGeneratingRelations;
void dataGrid_AutoGeneratingRelations(object sender, Syncfusion.UI.Xaml.Grid.AutoGeneratingRelationsArgs e)
{
e.GridViewDefinition.DataGrid.Columns.Add(new GridTextColumn() { MappingName = "OrderID",AllowFiltering="True" });
e.GridViewDefinition.DataGrid.Columns.Add(new GridTextColumn() { MappingName = "ProductName",AllowFiltering="True" });
}The following screenshot displays the output.
Handle events for the Master-Detail View
The events that participate in the SfDataGrid for different purposes also participate in the Master-Details View.
You can wire those events by using the Master-Details View name from XAML or code behind. On the other hand, you can use the DataGrid property in the GridViewDefinition. You can access this property when you wire AutoGeneratingRelations event. The following code example explains you how to wire the event in different way.
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="OrderDetails">
<syncfusion:GridViewDefinition.DataGrid>
<syncfusion:SfDataGrid x:Name="FirstDetailsViewGrid"
CurrentCellActivating="FirstDetailsViewGrid_CurrentCellActivating"
CurrentCellBeginEdit="FirstDetailsViewGrid_CurrentCellBeginEdit" />
</syncfusion:GridViewDefinition.DataGrid>
</syncfusion:GridViewDefinition>
</syncfusion:SfDataGrid.DetailsViewDefinition>this.DetailsView.CurrentCellBeginEdit += DetailsView_CurrentCellBeginEdit;
this.DetailsView.CurrentCellActivating += DetailsView_CurrentCellActivating;void dataGrid_AutoGeneratingRelations(object sender, Syncfusion.UI.Xaml.Grid.AutoGeneratingRelationsArgs e)
{
e.GridViewDefinition.DataGrid.CurrentCellBeginEdit += DataGrid_CurrentCellBeginEdit;
e.GridViewDefinition.DataGrid.CurrentCellActivating += DataGrid_CurrentCellActivating;
}
void DataGrid_CurrentCellActivating(object sender, Syncfusion.UI.Xaml.Grid.CurrentCellActivatingEventArgs args)
{
}
void DataGrid_CurrentCellBeginEdit(object sender, Syncfusion.UI.Xaml.Grid.CurrentCellBeginEditEventArgs args)
{
}Set properties for the Master-Detail View
The Master-Details View Grid has the GridViewDefinition property that has the DataGrid property. The DataGrid has the return type of the SfDataGrid. You can get the DetailsGrid by using this property. The following code example explains how to set properties in the Master-Details View by using XAML.
<Page x:Class="SimpleApplication.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SimpleApplication"
xmlns:syncfusion=" using:Syncfusion.UI.Xaml.Grid"
Title="MainWindow"
Width="525"
Height="350">
<Page.DataContext>
<local:OrderInfoRepository />
</Page.DataContext>
<syncfusion:SfDataGrid x:Name="dataGrid"
AutoGenerateColumns="True"
ColumnSizer="Star"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="ProductDetails">
<syncfusion:GridViewDefinition.DataGrid>
<syncfusion:SfDataGrid x:Name="DetailsView"
AllowDeleting="True"
AllowEditing="True"
AllowFiltering="True"
AllowGrouping="True"
AllowSorting="True"
AutoGenerateColumns="False">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn MappingName="OrderID" />
<syncfusion:GridTextColumn MappingName="ProductName" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</syncfusion:GridViewDefinition.DataGrid>
</syncfusion:GridViewDefinition>
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>
</Window>The following code example explains how to set properties for the Master-Details View in code behind.
this.DetailsView.AllowDeleting = true;
this.DetailsView.AllowSorting = true;
this.DetailsView.AllowEditing = true;
this.DetailsView.AllowFiltering = true;You can set properties for the Master-Details View in the AutoGeneratingRelations event also where you get GridViewDefinition from the AutoGeneratingRelationsArgs. You can wire that event and customize columns within that event.
dataGrid.AutoGeneratingRelations += dataGrid_AutoGeneratingRelations;
void dataGrid_AutoGeneratingRelations(object sender, Syncfusion.UI.Xaml.Grid.AutoGeneratingRelationsArgs e)
{
e.GridViewDefinition.DataGrid.AllowDeleting = true;
e.GridViewDefinition.DataGrid.AllowEditing = true;
e.GridViewDefinition.DataGrid.AllowSorting = true;
e.GridViewDefinition.DataGrid.AllowFiltering = true;
}
Get the SelectedItem in the DetailsViewGrid
The SfDataGrid has the SelectedDetailsViewGrid property that returns the Selected DetailsViewGrid when you use the GridViewDefinition.
The property that participates in the SfDataGrid, can be accessed from the SelectedDetailsView also. Therefore, you can use the SelectedItem property to get the SelectedItem in the DetailsViewGrid. Select any of the records from the DetailsViewGrid and select item by using the following code example.
var data = dataGrid.SelectedDetailsViewGrid.SelectedItem;The following code example is used to get the selectedItem from the DetailsGrid of the Master-DetailsGrid.
var data = dataGrid.SelectedDetailsViewGrid.SelectedDetailsViewGrid.SelectedItem;Override selection controller in the DetailsViewDataGrid
Like the SfDataGrid, you can override selection controller in the DetailsViewDataGrid also. But, you cannot directly assign custom selection controller to the DataGrid defined in the GridViewDefinition like other properties like AllowEditing, AllowSorting, AllowFiltering, etc. Instead, you can assign custom selection controller to the DetailsViewDataGrid by using the DetailsViewLoading event. The following code illustrates how to assign custom selection controller to the DetailsViewDataGrid.
public class CustomSelectionController : GridSelectionController
{
public CustomSelectionController(SfDataGrid dataGrid):base(dataGrid)
{
}
}
this.grid.DetailsViewLoading += grid_DetailsViewLoading;
void grid_DetailsViewLoading(object sender, DetailsViewLoadingAndUnloadingEventArgs e)
{
// Assigns Custom Selection Controller for the DetailsViewDataGrid.
e.DetailsViewDataGrid.SelectionController = new CustomSelectionController(e.DetailsViewDataGrid);
}