Edit DetailTemplate in Blazor DataGrid

[Kapil Shah]

How do I edit DetailTemplate in Blazor DataGrid.

https://blazor.syncfusion.com/documentation/datagrid/detail-template

I have Master Child Grid. The Child Grid is in DetailTemplate.. I want to edit the row in the child grid . I want to put a radio button in the detail template, select a row and then save with a button at the bottom of the grid

Thanks

Kapil

[Sarveswaran Palani]

Hi Kapil,

Greetings from Syncfusion support.

Based on your requirement, We have used ValueChange Event in RadioButton to select the particular row when it is clicked and by using 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

Regards,
Sarvesh

[Kapil Shah]

Thank you for the sample example. I am implementing the solution.  Follow up 

1) I see that the Button <SfButton @onclick="Button">Button</SfButton> is inside the DetailTemplate.. That means for each child row we will have a button. 

 The requirement for us is we need  to have the button outside the DetailTemplate and then select all  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 selecting all the rows selected with radio button

Thanks

Kapil 

[Sarveswaran Palani]

Hi Kapil,

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.

Attachment: BlazorApp1_7961774b.zip