Refresh method doesn't work with custom control inherited from SfGrid

[Zdenek Plachy]

Hi,

I use own grid control inherited from SfGrid as you describe here:
Create custom Grid component in Blazor DataGrid Component | Syncfusion

I bind data and use server paging and sorting through CustomAdaptor. Everything works fine instead one thing: when I want force refresh data, Refresh() method does nothing. 

I make reference to grid variable:

<AbsGrid TValue="SystemLogDto" ID="Grid" @ref="@grid" Height="100%" Width="100%">...

Grid variable:

 AbsGrid<SystemLogDto>? grid;

When I call this method:

        private async Task ReloadData() {

            await grid.Refresh();

        }

it executes without error, but data are not loaded from CustomAdaptor. Debugger shows that adaptors method ReadAsync is not run.

Is there some trick how to refresh data in custom grid control based on SfGrid? 

Thank you! Zdenek

[Naveen Palanivel]

Hi Zdenek,

Sorry for the inconvenience. 

we are really sorry for the delay  We are currently Validating the reported query with high importance  at our end and we will update the further details within two days. Until then we appreciate your patience.

Regards,

Naveen Palanivel

[Zdenek Plachy]

For reproduction I made simple example. My question is how to trigger "Refresh" at inherited component (MyGrid). If I change MyGrid for SfGrid in TestMyGrid.razor, everything works as expected (new orders are put at the end of grid). But with inherited MyGrid command grid.Refresh does nothing. 

It is probably more generic C# question ("How to trigger base methods in inherited components"), but applied to Blazor SfGrid.

Thank you!

Source code for reproduction:

TestMyGrid.razor

@page "/sandbox/testmygrid"

<h3>Test MyGrid</h3>

<div style="margin:5px">

    Orders count: @orders.Count

    <button @onclick="AddOrder">Add Order</button>

    <button @onclick="RefreshGrid">Refresh Grid</button>

</div>

<MyGrid TValue="Order" DataSource="@orders" @ref=@grid>

</MyGrid>

@code {

    MyGrid<Order>? grid;

    private List<Order> orders = new();

    int orderNumber = 1000;

    class Order

    {

        public int OrderId { get; set; }

        public string? CustomerName { get; set; }

        public decimal Price { get; set; }

    }

    protected override async Task OnInitializedAsync()

    {

        for (int i = 0; i < 50; i++) AddOrder();

    }

    private void AddOrder()

    {

        orderNumber++;

        orders.Add(new Order

            {

                OrderId = orderNumber,

                CustomerName = new string[] { "Microsoft", "Google", "Amazon", "Netflix", "Ford" }[Random.Shared.Next(0, 4)],

                Price = Random.Shared.Next(1000, 9999)

            });

    }

    private void RefreshGrid() {

        grid.Refresh();

    }

}

MyGrid.razor

@using Syncfusion.Blazor.Grids

@typeparam TValue

@inherits SfGrid<TValue>

<SfGrid TValue="TValue" @attributes="props">

    @ChildContent

</SfGrid>

MyGrid.razor.cs

​

using Microsoft.AspNetCore.Components;

using Syncfusion.Blazor.Grids;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

namespace D3BS.Components

{

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

    {

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

        public override Task SetParametersAsync(ParameterView parameters)

        {

            props = parameters.ToDictionary();

            return base.SetParametersAsync(parameters);

        }

        protected async override Task OnParametersSetAsync()

        {

            await base.OnParametersSetAsync();

        }

    }

}

[Naveen Palanivel]

Hi Zdenek,

Sorry for the inconvenience. 

we are really sorry for the delay  We are currently Validating the reported query with high importance  at our end and we will update the further details within two days(26 Sep , 2022). Until then we appreciate your patience.

Regards,

Naveen Palanivel

[Naveen Palanivel]

Hi Zdenek,

Thanks for the patience.

We checked your query and we would to like to inform that , we trigger the refresh method for Sfgrid by calling its razor.cs page. We make simple sample and it is attached in this ticket for your reference. Please refer the attached sample and snippet  for your reference.

If, prepared sample is not your requirement. Please Share If possible, reproduce the reported issue in the provided sample or simple issue reproduceable sample. details will be helpful for us to validate the reported query at our end and provide the solution as early as possible.

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

    {

        SfGrid<TValue> grid;

                                

                                ……..

 

public async Task RefreshGrid()

        {

           await grid.Refresh();

        }

}

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

Attachment: BlazorGrid_(2)_63c06ac8.zip

[Zdenek Plachy]

Hi, 

thank you! You have excellent support.

Unfortunately your example is not working as I expected. 

I attach slightly modified example of your solution. Difference and matter of problem is having the New Record button not inside component but at parent page.

If you press "Add Record and Refresh Grid" button, record is added to collection (you can immidiately see it if you change page number or sort), but calling Refresh or RefreshGrid doesn't work and child component (grid) is not refreshed. Despite calling StateHasChanged or not. New records are add to collection. But instant grid refresh doesn't work.

I made working workaround removing "inherits" from grid component:

@using Syncfusion.Blazor.Grids

@typeparam TValue

<SfGrid TValue="TValue" Query="@Query" AllowSorting="AllowSorting" AllowPaging="AllowPaging" AllowResizing="true" ClipMode="ClipMode.EllipsisWithTooltip" @attributes="GridProperties" Height="100%" Width="100%" @ref=@grid>

    @ChildContent

    <GridPageSettings PageSize="PageSize" PageSizes="PageSizes"></GridPageSettings>

</SfGrid>

Then if you call RefreshGrid, everything works as expected. 

 public async Task Refresh()

        {

            await grid.Refresh();

        }

But this solution is a bit clumsy because you must explicitly declare all component properties you want to use. 

Thanks, Zdenek

Attachment: BlazorGrid_Refresh_da685063.zip

[Naveen Palanivel]

Hi Zdenek,

Sorry for the inconvenience. 

we are really sorry for the delay  We are currently Validating the reported query with high importance  at our end and we will update the further details within two days. Until then we appreciate your patience.

Regards,

Naveen Palanivel

[Naveen Palanivel]

Hi Zdenek

We have checked your query and we are glad to hear that you have found an workaround for the mentioned issue. Also we could not able to find an alternative solution for the reported issue. Please get back to us if you face any difficulties/issues while using workaround.

Please let us know if you have any concerns,

Regards,

Naveen Palanivel

[Szoke]

Hi,

unfortunately, this anomaly still exists.

Are there other methods that do not work with inherited grid components?

[Prathap Senthil]

Hi Szoke,

Based on your requirements, 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
@using Syncfusion.Blazor.Grids

 

 

@typeparam TValue

@inherits SfGrid<TValue>

 

<SfGrid TValue="TValue" @ref="grid"  AllowSorting="AllowSorting" AllowPaging="AllowPaging" @attributes="props">

    @ChildContent

    <GridPageSettings PageCount="PAGE_COUNT" PageSize="DEFAULT_PAGE_SIZE" PageSizes="PageSizes"></GridPageSettings>

</SfGrid>

 

CustomGrid.razor.cs

    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 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();

        }

 

        public async Task<List<TValue>> GridSelectedRecords()

        {

            var s = await this.grid.GetSelectedRecordsAsync();

            return s;

        }

 

        public async Task RefreshGrid()

        {

            await this.grid.Refresh();

        }

 

    }

}

Index.Razor

<SfButton OnClick="GetSelectedRecords">GetSelectedRecords</SfButton>

<SfButton OnClick="Refresh">Refresh</SfButton>

 

<CustomGrid @ref="DataGridRef"  DataSource="Orders" TValue="Order"></CustomGrid>

 

 

 

@code{

------------

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

 

    public async Task GetSelectedRecords()

    {

        var selectedRecords =  DataGridRef.GridSelectedRecords().Result;

    }

 

    public async Task Refresh()

    {

        DataGridRef.RefreshGrid();

    }

 

 

 

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

}

Regards,
Prathap S

Attachment: CustomGrid_c52ed434.zip