Hello,
I am interested in Blazor Master Detail Grid. I came across this example
Blazor Master Detail Grid Example - Syncfusion Demos
I am interested in editing the child record after selecting the parent record and then save it to database
Does Synfusion supports this functionality
Thanks
Kapil
Hi Kapil,
Greetings from Syncfusion
support.
We analyzed your query, and we made a code snippet based on your requirement.
Kindly refer to the attached code snippet for your reference.
<SfGrid SelectedRowIndex=2 DataSource="@Employees"> <GridEvents RowSelected="RowSelecthandler" TValue="EmployeeData"></GridEvents> <GridColumns> <GridColumn Field=@nameof(EmployeeData.CustomerName) HeaderText="Customer Name" Width="110"> </GridColumn> <GridColumn Field=@nameof(EmployeeData.CompanyName) HeaderText="Company Name" Width="110"></GridColumn> <GridColumn Field=@nameof(EmployeeData.Address) Width="110"></GridColumn> <GridColumn Field=@nameof(EmployeeData.Country) Width="110"></GridColumn> </GridColumns> </SfGrid> <br> <div class='e-statustext'>Showing orders of Customer: <b>@SelectedCustomer</b></div>
<SfGrid DataSource="@GridData" Query="@(new Query().Where("EmployeeID", "equal", RowIndex))" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> <GridColumns> <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="110"> </GridColumn> <GridColumn Field=@nameof(Order.ShipName) HeaderText="Ship Name" Width="110"></GridColumn> <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="110"></GridColumn> <GridColumn Field=@nameof(Order.ShipAddress) HeaderText="Ship Address" Width="110"></GridColumn> </GridColumns> </SfGrid> |
Kindly get back to us if you have any further queries.
Regards,
Keerthana.
This is not what I am looking for. I need to use Detail Template to show the child data.
However, couple of questions
1) I need to adjust the width of the Parent Grid and not the Child Grid. When I try to adjust the width with CSS it gets applied to both the grids . How do I adjust the width of columns of Parent Grid so they are close to each other
2) I need to include radio button in the Child Grid in the Detail Template. I checked in the documentation and unable to find radio button for each row in Child grid of Item template
3) Lastly in the screen shot, you will see "Resolve Batch Duplicate" button.. After selecting the radio buttons in the Child Grid in Detail Template, I need to click the "Resolve Batch Duplicate" button to save the selected rows
How do I select save the selected radio button row and save?
Thank you for your help
Please see screen shot
Hi Kapil,
Greetings from Syncfusion support.
Currently, we are validating your query at our end. Further details will be
updated within two business days.
Until then we appreciate your patience.
Regards,
Keerthana.
Any update on the functionality?
Hi Kapil,
Thanks for your patience.
Query: “The child content element 'Template' of component 'GridColumn' uses the same parameter name ('context') as enclosing child content element 'DetailTemplate' of component 'GridTemplates'.”
If we have more than one context then it will throw the above error. So we suggest you rename the context by using the Context property in the Grid column.
Query:
“ I need to include a radio button in the Child Grid in the Detail Template.
After selecting the radio buttons in the Child Grid in
Detail Template, I need to click the "Resolve Batch Duplicate" button
to save the selected rows”
We have used ValueChange Event in RadioButton to select the particular row when it is clicked and by using the GetSelectedRecords method we can get the selected record detail. Kindly check the below-attached code snippet and sample for your reference.
<SfGrid DataSource="@Employees" Height="315px"> <GridTemplates> <DetailTemplate> @{ var employee = (context as EmployeeData); <SfGrid DataSource="@Orders" @ref="Grid" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))"> <GridColumns> <GridColumn Context="context1"> <Template> @{ var employee = (context1 as EmployeeData);
<SfRadioButton Name="selection" ValueChange="@((args)=>OnChange(args,employee))" TChecked="bool"></SfRadioButton>
} </Template> </GridColumn>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> </GridColumn> <GridColumn Field=@nameof(Order.CustomerName) HeaderText="Last Name" Width="110"></GridColumn> <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Title" Width="110"></GridColumn> </GridColumns> </SfGrid>
<SfButton @onclick="Button">Button</SfButton>
} </DetailTemplate> </GridTemplates> <GridColumns> ... </GridColumns> </SfGrid>
@code{ public void Button() { var a = Grid.GetSelectedRecordsAsync(); } public async Task OnChange(ChangeArgs<bool> Args, EmployeeData val) { //to find the row index var rowIndex = Grid.CurrentViewData.ToList().IndexOf(val); //select the record using index and SelectRow method await Grid.SelectRow((double)rowIndex,false); }
} |
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-479296141.zip
Query: “I need to adjust the width of the Parent Grid and not the Child Grid. ”
We are quite unclear about the exact requirement. Kindly share us whether you are trying to set different width for Grid columns or whether you are trying to set different width for entire DataGrid. So kindly explain in brief about your requirement. It will be very helpful for us to validate the reported issue on our end. If possible kindly share a video demonstration of the issue.
Please let us know if you have any concerns.
Regards,
Keerthana.
Hi Keerthana,
Thank you for the sample example. I implemented the solution .The feedback we got is
1) We see that the Button <SfButton @onclick="Button">Button</SfButton> is inside the DetailTemplate.. That means for each child row we will have a button. Is it possible to have the button outside the DetailTemplate and then select the rows with Radio button and click the button to save it to the database
That way we will have just one button on this Grid and can save multiple rows.
2) Query: “I need to adjust the width of the Parent Grid and not the Child Grid. ”
I meant how do I adjust the width of the columns of the parent Grid i.e EmployeeData Grid so the columns are close to each other.. When I try to do adjust the css , it adjust the width of Orders Grid too
Thank you for your help
Kapil
Hi Kapil,
Sorry for the inconvenience caused.
Query: “ Is it possible to have a button outside the DetailTemplate and then select the row with the radio button and click the button to save it to the database?”
We would like to inform you the component defined inside the DetailtTemplate feature will render separate components of the same inside each parent record. So defining the component with normal reference (@ref) will contain the instance of the Last rendered Grid component only. So we suggest you define the @ref property with the Dictionary variable to access the reference each of ChildGrid rendered and find the selected records of each Child grid.
We have discussed a similar topic in our UG documentation which can be referred below
Also, we would like to suggest you use the built feature of Grid to achieve your requirement. We have built-in support to select multiple records using the Checkbox component. So instead of RadioButton, the CheckBox component will be rendered and selected records can be obtained using the public method (GetSelectedRecordsAsync) of the Grid. Refer to the below code example.
<SfButton @onclick="Button">Button</SfButton>
<SfGrid DataSource="@Employees" Width="900"> <GridTemplates> <DetailTemplate> @{ var employee = (context as EmployeeData); <SfGrid DataSource="@Orders" @ref=Grid[(int)employee.EmployeeID] Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))"> <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings> <GridColumns> <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn> <GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> </GridColumn> <GridColumn Field=@nameof(Order.CustomerName) HeaderText="Last Name" Width="110"></GridColumn> <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Title" Width="110"></GridColumn> </GridColumns> </SfGrid> } </DetailTemplate> </GridTemplates> <GridColumns> <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="100"> </GridColumn> <GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="100"></GridColumn> <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="100"></GridColumn> <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="500"></GridColumn> </GridColumns> </SfGrid>
@code { Dictionary<int?, SfGrid<Order>> Grid = new Dictionary<int?, SfGrid<Order>>(); public async Task Button() { //obtain the all the keys var keys = Grid.Keys; //new list to find all the selected records of all the childs. var selected = new List<Order>();
foreach (var key in keys) { //obtain the selected record of each grid using key var records = await Grid[(int)key].GetSelectedRecordsAsync(); foreach (var rec in records) { //include that records retrieved. selected.Add(rec); } } } |
For your reference, we have attached the sample. Refer to our UG documentation for your reference
https://blazor.syncfusion.com/documentation/datagrid/selection#checkbox-selection
If you want to still achieve this requirement, then the selection action has to be handled in Grid based on the radio button change which will be more complex. So kindly confirm whether the above solution resolves your requirement or if you want to achieve a similar requirement using the RadioButton component.