Grid toolbar with custom radio buttons and search

[Sandip Mane]

Hello,

I am trying to customize Grid toolbar with few radio buttons keeping default 'search' functionality. I used RenderFragment method to add 2 radio buttons followed by 'Search' in the toolbar. Buttons are displayed and their callback works, but I am not able to refresh Grid data based on radio selection.

I also looked at template method, but with that I am not able to integrate default 'Search' function in the toolbar.

@code {

    private static string SchemeTypeCheckedValue = "a";

    private SfGrid<OrderData> Grid;

    private List<Object> Toolbaritems = new List<Object>() {

        new ItemModel() { Type = ItemType.Button, Template = AditionalOps}, "Search"

    };

    public List<OrderData> Orders { get; set; }

    protected override void OnInitialized()

    {

        Orders = OrderData.GetAllRecords();

    }

    private static RenderFragment AditionalOps => @<div>

        <SfRadioButton TChecked="string" Label="VICTE" Name="SchemeTypeOptions" Value="v" onchange="@OnRadioButtonChange">

        </SfRadioButton>

        <SfRadioButton TChecked="string" Label="SUPRD" Name="SchemeTypeOptions" Value="s" onchange="@OnRadioButtonChange">

        </SfRadioButton>

    </div>;

    private static void OnRadioButtonChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)

    {

        Console.WriteLine("OnRadioButtonChange start");

        SchemeTypeCheckedValue = args.Value as string ?? string.Empty;

        String message = $"Selected Scheme Type: {SchemeTypeCheckedValue}";

        // How to trigger GetAllRecords() method to refresh data since static method can not access Orders variable.???

        Console.WriteLine(message);

    }

Attachment: Test2.razor_47a51152.zip

[Naveen Palanivel]

Hi Sandip,

We checked your query and understand that you want to filter data using radio buttons while keeping the default 'Search' functionality in the Syncfusion Blazor Grid toolbar. We recommend referring to the API documentation for guidance. You can use the built-in toolbar functionality in the custom toolbar with radio buttons by calling programmatic methods. In the radio button change event, we have filtered the Grid using the SearchAsync() method. Please refer to the code snippet and sample provided for your reference.

Sample : https://blazorplayground.syncfusion.com/embed/rthojKMDJhJKvpKp?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

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

   private static void OnRadioButtonChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)

   {

       Console.WriteLine("OnRadioButtonChange start");

       SchemeTypeCheckedValue = args.Value as string ?? string.Empty;

       String message = $"Selected Scheme Type: {SchemeTypeCheckedValue}";

       Grid.SearchAsync(SchemeTypeCheckedValue);

       Console.WriteLine(message);

   }

Please get back to us if you need further assistance. 

Regards,

Naveen Palanivel.

[Sandip Mane]

Hi Naveen,

Thanks.

I can see that you changed Grid variable to static as 

private static SfGrid<OrderData> Grid;

Most of your examples, documentation etc. use Grid as a non-static variable. So, will converting to static cause any problem in future, especially when multiple users start accessing the same page?

Also, I wanted these radio buttons to fetch new data and display grid with the new data, instead of filtering the existing data.

(I had not mentioned that clearly in the original message, sorry about that).

I tried with Grid.Refresh() and also Grid.Refresh(true), but it did not have any effect.

I wanted these radio button selection to trigger GetAllRecords() again so that I can fetch new data and use that as a datasource for grid.

[Prathap Senthil]

Based on your query, we have removed the static type and used a non-static approach. And we attempted to reproduce the issue where the data was not reflected in the grid. However, we were unable to replicate the reported issue. For your reference, we have attached a simple sample. To further investigate the problem, we require additional clarification from your end. Please provide the following details to help us proceed further.

• To analyze the reported issue, could you please share a simple and reproducible sample that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution.
• Kindly share your attempt to replicate the issue using the attached simple sample.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Sample: https://blazorplayground.syncfusion.com/embed/BNByZUiLKhFOvqMY?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Sandip Mane]

Thanks. This works.

Refresh issue in my case was arising because I was modifying grid datasource directly as Grid.DataSource=GetAllRecords(). I could achieve required result by resettting grid by calling Grid.ResetPersistDataAsync() instead of Grid.Refresh().

But, now I modified code to change razor page level data (Orders) as done by you, and now Grid.Refresh() achieves required result. Thanks a

[Prathap Senthil]

Thanks for the update. We are happy to hear that the issue has been resolved on your end. Please feel free to reach out if you have any further queries regarding this issue.