How to set @ref for child components in Grid > GridColumn template?

[Davy]

How to set @ref for child components in a  Sf Grid with GridColumn template?

I am trying your documenation as described here:

https://www.syncfusion.com/faq/blazor/components/how-to-set-ref-for-dynamically-generated-elements

But this doesn't seem to work when using another Sf Component in a GridColumn Template, eg:

<SfGrid>

 <GridColumns>

        <GridColumn Field="State" HeaderText="State" Width="90">

            <Template>

                @{

                    var myObj = (context as MyCustomObject);

                    <div>

                        <SfProgressButton @ref="@SfRefreshButtons[myObj.Id]" CssClass="e-round e-small" IconCss="mdi mdi-refresh-circle" OnClick="@(() => OnRefreshClick(myObj.Id))">

                            <ProgressButtonSpinSettings Position="SpinPosition.Center"></ProgressButtonSpinSettings>

                            <ProgressButtonAnimationSettings Effect="AnimationEffect.ZoomOut"></ProgressButtonAnimationSettings>

                        </SfProgressButton>

                    </div>

                }

            </Template>

        </GridColumn>

 </GridColumns>

<SfGrid>

[Vignesh Natarajan]

Hi Davy,  

 

Thanks for contacting Syncfusion support.  

 

Query: “But this doesn't seem to work when using another Sf Component in a GridColumn Template,” 

 

From your query we understand that you are facing difficulties while taking the instance of Child components in Grid. We have prepared a sample using ProgressBar inside the GridColumnTemplate and initialized the instance of the button in code section.  

 

Refer the below code example. 

 

@using Syncfusion.Blazor.Grids 

@using Syncfusion.Blazor.SplitButtons 

  

<SfGrid DataSource="@Employees"> 

    <GridColumns> 

        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var myObj = (context as EmployeeData); 

  

                    <div> 

                        <SfProgressButton @ref="@SfRefreshButtons[myObj.EmployeeID]" CssClass="e-round e-small" IconCss="mdi mdi-refresh-circle" OnClick="@(() => OnRefreshClick(myObj.EmployeeID))"> 

                            <ProgressButtonSpinSettings Position="SpinPosition.Center"></ProgressButtonSpinSettings> 

                            <ProgressButtonAnimationSettings Effect="AnimationEffect.ZoomOut"></ProgressButtonAnimationSettings> 

                        </SfProgressButton> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    private Dictionary<int?, SfProgressButton> SfRefreshButtons = new Dictionary<int?, SfProgressButton>();  

    public void OnRefreshClick(int? val) 

    { 

        var a = SfRefreshButtons;  

    } 

 

 

Refer the below screenshot for your reference 

 

 

 

Kindly get back to us if you have further queries or share more details about your requirement.  

 

Regards, 

Vignesh Natarajan 

[Davy]

Thanks, got it working now.

[Vignesh Natarajan]

Hi Davy,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan