Searching Event

[Luis Roberto]

Hi, I have a grid that load with only 50 records from database when the page is initialized. Then I write a search event that loads the grid sending the search text to an API and getting the results back:

public void ActionBeginHandler(ActionEventArgs<Cliente> args)

    {

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Searching)

            API.SearchClientes(args.SearchString);

    }

The grid gets the records and load them ok. The problem comes when I click on any grid column to order the data, it throws an error:

Uncaught (in promise) Error: System.ArgumentException: There is no event handler associated with this event. EventId: '149'. (Parameter 'eventHandlerId')

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync(UInt64 eventHandlerId, EventFieldInfo fieldInfo, EventArgs eventArgs)

This does not happen when the grid is first initialized only when I use the search textbox.

This is my grid definition:

<SfGrid DataSource="@VM.ClientesL" AllowSorting="true" AllowTextWrap="true" AllowResizing="true" AllowReordering="true" Toolbar="@(new List<string>() { "Search" })">

        <GridEvents CommandClicked="OnCommandClicked" TValue="Cliente" OnActionBegin="ActionBeginHandler"></GridEvents>

        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true">

        </GridEditSettings>

        <GridColumns>

            <GridColumn Field=@nameof(Cliente.ClienteId) HeaderText="Cliente Id" TextAlign="TextAlign.Center" Width="15"></GridColumn>

            <GridColumn Field=@nameof(Cliente.Nombre) HeaderText="Nombre" TextAlign="TextAlign.Left" Width="55"></GridColumn>

            <GridColumn Field=@nameof(Cliente.CodigoPostal) HeaderText="Codigo Postal" Type="ColumnType.Date" TextAlign="TextAlign.Center" Width="15"></GridColumn>

            <GridColumn HeaderText="Editar" Width="15">

                <GridCommandColumns>

                    <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { Content = "Editar", CssClass = "e-flat" })"></GridCommandColumn>

                </GridCommandColumns>

            </GridColumn>

        </GridColumns>

    </SfGrid>

Thank you very much

[Rahul Narayanasamy]

Hi Luis, 

Greetings from Syncfusion. 

We have validated your query with the provided information. We might suspect that you have performed your custom search operation in your API service. If you have performed any custom search instead of default search operation, then you need to cancel the default operation and perform your operation. 

public void ActionBeginHandler(ActionEventArgs<Order> args) 

    { 

        if(args.RequestType == Syncfusion.Blazor.Grids.Action.Searching) 

        { 

            args.Cancel = true;   // cancel default operation 

            //perform your search 

        } 

    } 

Also, we need some details regarding your requirement. It will be helpful to validate and provide a better solution. 

• Whether did you perform sorting operation after performing search operation?
• Whether did you perform reordering operation after performing search operation?
• Video demonstration of the problem.
• Share a simple reproduceable sample if possible.

Regards, 

Rahul 

 

[Luis Roberto]

Thank you very much Rahul for your Reply, let me explain in more detail what I am trying to do.

I have a Blazor WebAssembly asp.net core hosted, So the Client project gets data from the API on the Server project.

I have a Client database table with 6 thousand records, So when I load the grid the first time I dont need to show all the records, I just want to show the user with 50 records so the gris is not empty. 

Then the user uses the search on the top of the grid and then I send the search text to the API and load the grid with all the records returned from the API, I do this because other wise the search would only looks on the 50 records I laoded.

I'm using a MVVM pattern so the grid datasource is a list of Clients on the ViewModel

(ClientViewModel.cs)

private IEnumerable clients;

public IEnumerable ClientsL

{

get

    {

        return clients;

    }

    set

    {

clients = value;

    }

}          

(Clients.razor)

SfGrid DataSource="@ClientViewModel.ClientsL" AllowSorting="true"

So when the page is loaded I load the ClientsL list with the first 50 records from the API

(Clients.razor)

protected override async Task OnInitializedAsync() 

{

        await ClientViewModel.InitializeViewModelAsync();

}

(ClientsViewModel.cs)

public async Task InitializeViewModelAsync() 

{

     clients = await apiClientManager.GetAllClients();

}

Then when the client search I dont want the grid search on the records already loaded, because they are just 50, so I overwrite the event to conect to de API to search for the records

(Clients.razor)

 public void ActionBeginHandler(ActionEventArgs args)

    {

        // Here you can customize your code

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Searching)

        {

            ClientsViewModel.SearchClients(args.SearchString);

        }

    }

(ClientsViewModel.cs)

public async Task SearchClients(string search)

{

            clients = await apiClientManager.GetSearchClients(search);

}

It works great the API returns the records and the grid show them without a problem.

Once the grid has the records I search for, I  try to order them for example by Customer Name and I click the column header, then the grid disappear, and in the console I can see this error:

Uncaught (in promise) Error: System.ArgumentException: There is no event handler associated with this event. EventId: '392'. (Parameter 'eventHandlerId')

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync(UInt64 eventHandlerId, EventFieldInfo fieldInfo, EventArgs eventArgs)

   

 I'm not writing code to sort records on the grid, all I want is to catch the search event to connect to de API and get the records.

 

 I tried to do what you say and cancel the event

 public void ActionBeginHandler(ActionEventArgs args)

    {

         if (args.RequestType == Syncfusion.Blazor.Grids.Action.Searching)

        {

            args.Cancel = true;

            ClientsViewModel.SearchClients(args.SearchString);

        }

}

But then the search is not executed, so the grid never get the records from the API.

Thank you very much for your help, I really apretiate it.

[Rahul Narayanasamy]

Hi Luis, 

We have validated your query with the provided information. You have initially load the only small amount(50) of data to the Grid. After that while performing search operation, you want to perform the search operation to the another large data and then you want to show the resulted data in the Grid. 

You have used DataSource property of the Grid to bind the data. So while performing the search operation, you can prevent the default search operation using OnActionBegin event of the Grid(as we suggested in last update). After canceling the default operation you can send the search value to your API to perform the search operation and return the result. After returning the search result data, you need to assign the resulted data to the Grid DataSource in action events to reflect the changes. 

If you are still facing the problem, then could you please share a simple sample which showing your problem. It will be helpful to validate and provide a better solution. 

Please let us know if you have any concerns. 

Regards, 

Rahul