ref not working when using sfgrid as Custom Grid Component

[Christopher Brandsdal]

I have a custom grid component set up and it works fine for the most part. The only issue I have is that when I try to call for example "_grid.ResetPersistDataAsync()" on the custom component the @ref="_grid" is always null. I think I am doing something wrong. How can I call functions on the grid in the custom component from parent page? Below is my code. I hope it shows what I mean.

ParentPage.raz:

<MudGrid Class="flex-1 d-flex" Spacing="1">
    <MudItem xs="12">
        <SfButton OnClick="@(async () => await this._grid.ResetPersistDataAsync())">clear table setup</SfButton>
        <BaseGrid @ref="_grid" DataSource="_gridData" TValue="MaterialVM">
            <GridColumns>
                <GridColumn Field=@nameof(MaterialVM.Id)
                            HeaderText="Id"
                            Visible="false"
                            AllowEditing="false"
                            AllowSearching="false"
                            AllowAdding="false"
                            IsPrimaryKey="true"></GridColumn>


                <GridColumn Field="@nameof(MaterialVM.Name)"
                            Type="ColumnType.String"
                            Visible="true"
                            AllowEditing="false"
                            AllowAdding="false"
                            HeaderText="@Localizer.GetString(() => WebLocalizerResources.Fields.Name)"
                            ClipMode="ClipMode.EllipsisWithTooltip"></GridColumn>
            </GridColumns>
        </BaseGrid>
    </MudItem>
</MudGrid>

ParentPage.razor.cs:

public partial class MaterialListComponent : ExtendedComponentBase
{
    private SfGrid<MaterialVM> _grid;
    private List<MaterialVM> _gridData = new List<MaterialVM>();


    protected override async Task OnInitializedAsync()
    {
            var materials = await MaterialService.GetMaterialsAsync();
            if (materials.IsSuccess)
            {
                _gridData = Mapper.Map<List<MaterialVM>>(materials.Value);
            }


        IsBusy = false;
        await base.OnInitializedAsync();
    }
}

BaseGrid.razor:

@typeparam TValue
@inherits SfGrid<TValue>


        @code {
    private static RenderFragment searchBoxFragment = @<SyncFusionGridSearchBox TItem="TValue"></SyncFusionGridSearchBox>;
        }


<SfGrid
    TValue="TValue"
    AllowSorting="AllowSorting"
    AllowPaging="AllowPaging"
    @attributes="props"
        @ref="_grid"
        AllowSelection="true"
        AllowFiltering="true"
        AllowExcelExport="true"
        AllowPdfExport="true"
        AllowMultiSorting="true"
        AllowReordering="true"
        AllowResizing="true"
        ShowColumnChooser="true"
        EnableHover="false"
        RowHeight="40"
        Toolbar="@Toolbarr">
    <GridSelectionSettings CheckboxOnly="true" PersistSelection="true"></GridSelectionSettings>
    <GridSortSettings>
        <GridSortColumns>
            <GridSortColumn Field="@DefaultSortField" Direction="Syncfusion.Blazor.Grids.SortDirection.Ascending"></GridSortColumn>
        </GridSortColumns>
    </GridSortSettings>
    <GridSearchSettings Operator=Syncfusion.Blazor.Operator.Contains IgnoreCase="true"></GridSearchSettings>
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>
    <GridPageSettings PageSize="20" PageSizes="true"></GridPageSettings>
    <GridEvents OnActionBegin="OnActionBeginHandler" OnToolbarClick="OnToolbarClickHandler" RowSelected="OnRowSelectedHandler" TValue="TValue"></GridEvents>
    @ChildContent
    <GridPageSettings PageCount="PAGE_COUNT" PageSize="DEFAULT_PAGE_SIZE" PageSizes="PageSizes"></GridPageSettings>
</SfGrid>

BaseGrid.razor.cs:

public partial class BaseGrid<TValue> : SfGrid<TValue>

{
    [Parameter] public string DefaultSortField { get; set; } = "Id";
    [Parameter] public string UniqueId { get; set; } = "_grid";


    [Parameter] public List<object> Toolbarr { get; set; } = new List<object> { new ToolbarItem() { Type = ItemType.Input, Template = searchBoxFragment }, "Edit", "Update", "Cancel", "ExcelExport", "CsvExport", "PdfExport", "ColumnChooser" };


    private SfGrid<TValue> _grid;


    [Parameter] public EventCallback<ActionEventArgs<TValue>> OnActionBegin { get; set; }


    private async Task OnActionBeginHandler(ActionEventArgs<TValue> args)
    {
        if (OnActionBegin.HasDelegate)
        {
            await OnActionBegin.InvokeAsync(args);
        }
        else
        {
            // Default handling inside BaseGrid
        }
    }


    [Parameter] public EventCallback<RowSelectEventArgs<TValue>> OnRowSelected { get; set; }


    private async Task OnRowSelectedHandler(RowSelectEventArgs<TValue> args)
    {
        if (OnRowSelected.HasDelegate)
        {
            await OnRowSelected.InvokeAsync(args);
        }
        else
        {
            // Default handling inside BaseGrid
        }
    }


    [Parameter] public EventCallback<Syncfusion.Blazor.Navigations.ClickEventArgs> OnToolbarClick { get; set; }


    private async Task OnToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
    {
        if (OnToolbarClick.HasDelegate)
        {
            await OnToolbarClick.InvokeAsync(args);
        }


        if (args.Item.Id.Contains("_pdfexport"))
        {
            _grid.ExportToPdfAsync();
        }


        if (args.Item.Id.Contains("_excelexport"))
        {
            _grid.ExportToExcelAsync();
        }


        if (args.Item.Id.Contains("_csvexport"))
        {
            _grid.ExportToCsvAsync();
        }
    }




    public const int PAGE_COUNT = 5;
    public const int DEFAULT_PAGE_SIZE = 10;
    public string[] PageSizes = new string[] { "10", "20", "50" };
    IReadOnlyDictionary<string, object> props { get; set; }
    public override Task SetParametersAsync(ParameterView parameters)
    {
        //Assign the additional parameters
        props = parameters.ToDictionary();
        return base.SetParametersAsync(parameters);
    }
    protected async override Task OnParametersSetAsync()
    {
        AllowPaging = true;
        AllowSorting = true;
        await base.OnParametersSetAsync();
    }
}

[Prathap Senthil]

Hi Christopher,

Based on your reported problem, we suggest using the following approach to achieve your goal using the grid methods. You can define and use the approach like this, according to the methods you want. Kindly refer to the code snippet and sample below for your reference.

CustomGrid.Razor

 

public partial class CustomGrid<TValue> : SfGrid<TValue>

{

     public const int PAGE_COUNT = 5;

     public const int DEFAULT_PAGE_SIZE = 10;

     public string[] PageSizes = new string[] { "10", "20", "50" };

     IReadOnlyDictionary<string, object> props { get; set; }

 

     public SfGrid<TValue> grid { get; set; }

 

public async Task ResetPersistData()

{

     await this.grid.ResetPersistDataAsync();

}

Index.Razor


<CustomGrid @ref="DataGridRef" ID="Grid2222" EnablePersistence  Toolbar="@(new List<string>() { "ExcelExport"})" AllowExcelExport="true" DataSource="Orders" TValue="Order">

    <Syncfusion.Blazor.Grids.GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Order"></Syncfusion.Blazor.Grids.GridEvents>

</CustomGrid>
    public CustomGrid<Order> DataGridRef { get; set; }

   public async Task Reset()

  {

      DataGridRef.ResetPersistData();

  }

If the issue still persists, kindly share the following details for further validation on our end:

• Could you please share a simple issue-reproducible sample with duplicate data?
•  Alternatively, could you please reproduce the reported issue in the provided sample?

The requested details will be very helpful in validating the reported query on our end and providing a solution as early as possible. Thank you for your understanding.

Regards,
Prathap Senthil