![mx84 both display master mx84 both display master](http://www.comuseum.com/wp-content/uploads/2015/02/zhao-mengfu_man-riding-a-horse-325x250.jpg)
Location: Bind to Maps DataSource based on the city of the selected salesperson.I’ll retrieve the order data from a remote service. Orders: Bind to child data grid’s data source based on the ID of the selected salesperson.
![mx84 both display master mx84 both display master](https://www.gotothings.com/hr/maintain-hr-master.jpg)
Salesperson: Bind to master grid’s data source.I’m going to build four model classes to employ in this master-detail view creation:
Mx84 both display master how to#
Now, let’s dive in deep and see how to design the master-detail view using these Syncfusion Blazor components. Tabs: To place all these components as individual tab items inside the Tabs component. Scheduler: To display the meeting schedules of a salesperson with their customers.Ĭustomized template: To show the personal information of a salesperson. Maps: To visualize the location and contact address of a salesperson. To design the detail view, I’ll be using the following list of Blazor components:ĭataGrid: To display the sales order-related data of the selected salesperson from a master view. I’ll be using a Blazor DataGrid component to design the top-level master grid UI view with limited fields like each salesperson’s name, designation, city and phone number. Designing a master-detail viewįirst, let me list out the Syncfusion Blazor components that I’m going to use to design this master-detail view. The “detail” area displays the corresponding child information of the selected parent grid record and it could either display a child grid or any kind of customized information inside it. Thus, the master-detail view allows you to visualize the parent-child relationships by displaying the categorized grid data in a hierarchical style. The relevant information of the selected master data item will be shown inside the “detail” area. Here, the list of salesperson names displayed with limited details in the top grid UI is referred to as the “master” data view. The company could categorize their data meaningfully based on personal details, lists of sales orders, contact address, their meeting schedules with customers, and so on. If a company is recording its employee details from its sales department, it would only make sense to categorize and show them in a meaningful way. So, what is this term, master-detail view? Let’s look at a real-time example. This blog post will show you how easily you can visualize data in a master-detail hierarchy in a single grid view in Blazor.