Refresh nested Grid in row details

[Reinhard Ostermeier]

Hi,

I use a SfGrid inside the row details of a SfGrid.

Everything is working as expected, but I need to refresh the nested grid.

For the outer Grid this is easy, since I can use @ref to get a field with a reference to it.

But how can I do this with all nested grids in the row details?

Is there a way to iterate through all of them?

<SfGrid @ref="_testGrid" Height="100%"
        TValue="TestModel" AllowSorting="true" AllowGrouping="true" AllowResizing="true"
        ShowColumnChooser="true">
<SfDataManager Adaptor="Adaptors.CustomAdaptor">
<TestDataAdaptor @ref="_testDataAdaptor" Backend="@ResultServer.Backends.First()" />
</SfDataManager>
<GridGroupSettings Columns="@_initialTestGroupColumns">
</GridGroupSettings>
<GridEvents OnActionFailure="TestsGridFailure" TValue="TestModel" RowDataBound="OnTestRowBound" />
<GridColumns>
<GridColumn Field=@nameof(TestModel.ItemName) HeaderText="Test item" Width="200"></GridColumn>
<GridColumn Field=@nameof(TestModel.ComponentName) HeaderText="Component" Width="200"></GridColumn>
<GridColumn Field=@nameof(TestModel.StartTime) Format="G" Type="ColumnType.DateTime" HeaderText="Test time" Width="200" AutoFit="true"></GridColumn>
<GridColumn Field=@nameof(TestModel.TestStand) HeaderText="Test stand" Width="200" Visible="false"></GridColumn>
<GridColumn Field=@nameof(TestModel.Operator) HeaderText="Operator" Width="200" Visible="false"></GridColumn>
<GridColumn Field=@nameof(TestModel.Version) HeaderText="Version" Width="200" AutoFit="true" Visible="false"></GridColumn>
<GridColumn Field=@nameof(TestModel.TestRunId) HeaderText="Test run ID" Width="200" AutoFit="true"></GridColumn>
</GridColumns>
<GridTemplates>
<DetailTemplate>
@{
var test = context as TestModel;
<SfGrid TValue="TestResultModel" AllowSorting="true" AllowResizing="true">
<SfDataManager Adaptor="Adaptors.CustomAdaptor">
<TestResultAdaptor TestId="@test.TestId" LastResultsOnly="@ShowLastTestResultOnly" Backend="@ResultServer.Backends.First()" />
</SfDataManager>
<GridEvents OnActionFailure="ResultsGridFailure" TValue="TestResultModel" RowDataBound="OnResultRowBound" />
<GridColumns>
<GridColumn Field=@nameof(TestResultModel.StartTime) Format="G" Type="ColumnType.DateTime" HeaderText="Time" Width="200" AutoFit="true"></GridColumn>
<GridColumn Field=@nameof(TestResultModel.IsOk) HeaderText="Is OK" Width="200" AutoFit="true"></GridColumn>
<GridColumn Field="@nameof(TestResultModel.DesiredValue)" HeaderText="Desired value" Width="200" AutoFit="true"></GridColumn>
<GridColumn Field=@nameof(TestResultModel.InfoText) HeaderText="Info text" Width="200" AutoFit="true"></GridColumn>
</GridColumns>
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
</SfGrid>

// refresh outer grid
_testGrid.Refresh();

//how do I refresh nested grids?

[Rahul Narayanasamy]

Hi Reinhard, 

Greetings from Syncfusion. 

You want to add reference to the detail grid and want to refresh the Grid. You can achieve your requirement by using below way. Here, we have set the Detail Grid reference dynamically while opening the detail grid using DetailDataBound event and refresh the recently opened detail grid using button click. Find the below code snippets and sample for your reference. 

 

<button @onclick="Refresh">Refresh recently opened detail Grid</button> 

 

 

<SfGrid ID="ParentGrid" @ref="ParentRef" DataSource="@Employees" Height="705px"> 

    <GridEvents DetailDataBound="DetailDataBoundHandler" TValue="EmployeeData"></GridEvents> 

    <GridTemplates> 

        <DetailTemplate> 

            @{ 

                var employee = (context as EmployeeData); 

                <SfGrid @ref="myComponents[id]" DataSource="@Orders" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))" 

                       > 

                    <GridColumns> 

                        <GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> </GridColumn> 

                        . . . 

                   </GridColumns> 

                </SfGrid> 

            } 

        </DetailTemplate> 

    </GridTemplates> 

    <GridColumns> 

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"> </GridColumn> 

        .. .  

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<EmployeeData> ParentRef { get; set; }    //parent Grid reference 

 

    public string id { get; set; } 

    private Dictionary<string, SfGrid<Order>> myComponents = new Dictionary<string, SfGrid<Order>>();  //for storing Detail Grid  reference dynamically 

 

    . ..  

 

    public void DetailDataBoundHandler(DetailDataBoundEventArgs<EmployeeData> args) 

    { 

        id = args.Data.EmployeeID.ToString();     //set detail Grid id when opening detail Grid 

    } 

    public void Refresh() 

    { 

        if(id != null) 

        { 

            myComponents[id]?.Refresh();   //Refresh recently opened child Grid 

        } 

    } 

 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/173805/ze/WebApplication1-1551813011  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Reinhard Ostermeier]

That I can use a dictionary as @ref was the trick that I needed.

Works as expected,
thank you very much.

[Rahul Narayanasamy]

Hi Reinhard, 

Thanks for the update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. Please get back to us if you need further assistance. 

Regards, 

Rahul