Returning data from RowTemplate Component to ParentGrid Datasource

[Evendyce]

Hi there,

Right so I'm working with the Blazor Grid at the moment and now find myself in need of updating the Grid Data (Specifically, a single Row data) from a Child Component (RowTemplate Component).

Parent Grid Setup:​
<SfGrid @ref="Grid" TValue="MyModel" DataSource="@Data">
    <GridTemplates>
        <RowTemplate>
            @{
                var row = (context as MyModel);
                <MyApp.Shared.Components.MyChildComponent ModelData="row" /> <<--Child Comp
            }
        </RowTemplate>
        <DetailTemplate>
            @{
                var childRow = (context as MyChildModel);
                <SfGrid TValue="MyChildModel" DataSource="@childRow.Data">
                    <GridColumns>
                        ...
                    </GridColumns>
                 </SfGrid>
             }
         </DetailTemplate>
     </GridTemplates>
     <GridColumns>
         <GridColumn HeaderText="Image" Width="15%"></GridColumn>
         <GridColumn HeaderText="Detail" Width="85%"></GridColumn>
     </GridColumns>
 </SfGrid>

My problem lies in the Child Component (Seen in RowTemplate).

Within the Component there are various minor processes and calculations that happen. Making use of SignalR, each component is listening for changes done that affect those individual components alone. And when those changes happen, and the values are modified I want to push the "row" data back up to the ParentGrid (Where the Datasource originates) and update the DataSource directly. So that I have no need to reload the Data from my Database.

The reason I need to do this, is because (as seen above) I also have a DetailTemplate which contains another Grid (ChildData of the RowData) and whenever I fire the "DetailExpandCollapseRow" call from the ChildComponent it reverts the RowData to that of the ParentGrid Datasource.

Within the Child Component I have access to "ParentGrid" which contains "UpdateRowAsync()", which could be a viable option for me. The only issue is it requires not only the Data but the row index as well. How can I get the RowIndex of the ChildComponent?

And please, if I'm going about this all wrong and there is a simpler way to achieve my goal I'd greatly appreciate if you could share with me. Let me know if there's any more information I can provide that may assist.

Many thanks!

Visual of the Grid

[Monisha Saravanan]

Hi Evendyce,

Greetings from Syncfusion support.

Query: “Within the Child Component I have access to "ParentGrid" which contains "UpdateRowAsync()", which could be a viable option for me. The only issue is it requires not only the Data but the row index as well.”

We would like to inform that CRUD operation and Data related operation will be performed only in Grid Column and it is not possible to use it inside Template columns. To change the values in the template we suggest you to change the ParentGrid datas from the Grid Instance and we suggest you to call Refresh method of DataGrid after making changes in Grid Datasource.

Kindly check the attached code snippet for your reference.

<SfGrid DataSource="@Employees" @ref="ParentGrid" Height="335px">

<GridTemplates>

  <RowTemplate Context="emp">

</RowTemplate>

        <DetailTemplate>

             @{

               <Counter></Counter>

             }

 

        </DetailTemplate>

    </GridTemplates>

    <GridColumns>

       

        <GridColumn HeaderText="Employee Details" Width="300" TextAlign="TextAlign.Left"></GridColumn>

    </GridColumns>

</SfGrid>

 

 

 

}

 

 

<SfGrid DataSource="@Employees" @ref="Grid1" Toolbar=@ToolbarItems>

           </GridColumns>

</SfGrid>

 

@code{

    [CascadingParameter]

    public SfGrid<EmployeeData> ParentGrid { get; set; }

    public SfGrid<EmployeeDataa> Grid1 { get; set; }

    public async Task OnActionComplete(ActionEventArgs<EmployeeDataa> data)

    {

        var a = Grid;

        //Change the Grid data

        Grid.Refresh();

    }

 

}

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

Please get back to us if you have further queries.

Regards,

Monisha