Checkbox selection in a detail grid

[Rodrigo Bernardi]

I'm facing some problems trying to select itens that are inside a grid in a detail template

In the below example i wanted to select a few itens of each detail, but i cant, when I reference the detail grid all i get is the instance of the last grid that was expanded

<SfGrid @ref="GridA" DataSource="As">

    <GridTemplates>

        <DetailTemplate>

            <SfGrid @ref="GridB" DataSource="@((context as A).Bs)"

               AllowSelection="true"

            >

                <GridColumns>

                    <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn>

                    <GridColumn Field="@nameof(B.SomeNumber)" HeaderText="Some Number"></GridColumn>

                </GridColumns>

            </SfGrid>

        </DetailTemplate>

    </GridTemplates>

    <GridColumns>

        <GridColumn Field="@nameof(A.index)" HeaderText="Index"></GridColumn>

    </GridColumns>

</SfGrid>

<button @onclick="GetSelectedNumbers">Get selected Numbers</button>

<div>

    @foreach (var item in SelectedNumbers)

    {

        <div>

            @item.SomeNumber

        </div>

    }

</div>

@code {

    SfGrid<A> GridA;

    SfGrid<B> GridB;

    public List<A> As { get; set; } = new();

    public List<B> SelectedNumbers { get; set; } = new();

    protected override Task OnInitializedAsync()

    {

        var rng = new Random();

        As = Enumerable.Range(1, 5).Select(x => new A()

            {

                Bs = Enumerable.Range(1, 5).Select(y => new B() { SomeNumber = rng.Next() }).ToList(),

                index = $"A: {x}"

            }).ToList();

        return base.OnInitializedAsync();

    }

    private void GetSelectedNumbers()

    {

        SelectedNumbers = GridB.SelectedRecords;

    }

    public class A

    {

        public List<B> Bs { get; set; }

        public string index { get; set; }

    }

    public class B

    {

        public int SomeNumber { get; set; }

    }

}

Then I tried to add and remove itens from a list using the RowSelected and RowDeselected events, it worked fine, until i clicked the header checkbox, when it happen it recognized the header checkbox as index 0 and just added the first item in the list, when deselecting it recognizes the checkbox item as the last one

Is there a better way i can do what i want ?

Attachment: DetailTemplateSelection_2f07e3a6.7z

[Monisha Saravanan]

Hi Bernardi, 

Greetings from Syncfusion. 

We have analyzed your query and we are able to reproduce the reported behavior in the provided sample. This is because all the detail template Grid will have same Grid instance. We have added reference to the detail grid dynamically by storing the Grid reference in dictionary object and calculated the selected records on the RowSelectedHandler using GetSelectedRecords method of Grid. 

Please find the below code snippets and sample for your reference. 

<SfGrid @ref="GridA" DataSource="As"> 

    <GridTemplates> 

        <DetailTemplate> 

            @{ 

                var cont = (context as A).index; 

            } 

            <SfGrid @ref="myGrids[cont]" DataSource="@((context as A).Bs)" AllowSelection="true">    

                <GridEvents TValue="B" RowSelected="@((args)=>RowSelectedHandler(args,cont))" RowDeselected="RowDeselectedHandler"></GridEvents> 

                <GridColumns> 

                    ... 

   </GridColumns> 

</SfGrid> 

 

@code { 

 

    private async Task RowSelectedHandler(RowSelectEventArgs<B> arg, string val) 

    { 

        double index = arg.RowIndex; //row index of header is 0 (the first item also has 0 as its index) 

        var gridInstance = myGrids[val]; 

//get the selected record detail below API 

        var t = await gridInstance.GetSelectedRecordsAsync(); 

        SelectedNumbers.Add(arg.Data); 

    } 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DetailTemplateSelection249428740.zip 

 

Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync 

Kindly get back to us if you have further queries. 

Regards, 

Monisha