We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Blazor Master Detail Grid

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 


8 Replies

KG Keerthana Ganesan Syncfusion Team December 13, 2022 12:05 PM UTC

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.



KS Kapil Shah January 2, 2023 03:56 PM UTC

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 


Attachment: MasterChildGrid_4ba810d.zip


KG Keerthana Ganesan Syncfusion Team January 5, 2023 01:23 PM UTC

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.



KS Kapil Shah January 6, 2023 10:19 AM UTC

Any update on the functionality?



KG Keerthana Ganesan Syncfusion Team January 9, 2023 01:20 PM UTC

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.



KS Kapil Shah January 9, 2023 07:06 PM UTC

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 



KS Kapil Shah replied to Kapil Shah January 10, 2023 07:46 PM UTC

Any update



KG Keerthana Ganesan Syncfusion Team January 12, 2023 03:44 AM UTC

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


https://blazor.syncfusion.com/documentation/datagrid/detail-template#how-to-access-the-child-component-in-the-detail-template

 

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.


Loader.
Up arrow icon