Preferred way to populate grid on dropdown select

[nicki]

I have managed to populate a SfDropDownList using a WebApiAdaptor SfDataManager.

I have also managed to populate a SfGrid using a WebApiAdaptor SfDataManager.

What is the preferred way of selecting an item in the  DropDownList and using it's value to load data into the Grid?

Do I create a method to use HttpClient to make an ajax call, populate a json object with the results and set the Grid to load from JSON?

[Prathap Senthil]

Hi nicki,

Based on your requirement, we suggest using the Grid Query property to filter the value using the dropdown in the following way. Kindly refer to the code snippet and sample below for your reference.

 

@using Syncfusion.Blazor.DropDowns

 

<SfDropDownList TValue="string" TItem="Orders" Placeholder="Select a CustomerID" @bind-Value="@CustomerIDValue" Width="300px">

    <SfDataManager Url="/api/Default" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

    <DropDownListEvents TValue="string" TItem="Orders" ValueChange="ValueChange"></DropDownListEvents>

    <DropDownListFieldSettings Text="CustomerID" Value="CustomerID"></DropDownListFieldSettings>

</SfDropDownList>

 

 

 

<div class="col-lg-12 control-section">

    <div class="content-wrapper">

        <div class="row">

            <SfGrid @ref="Grid" TValue="Orders"  AllowFiltering="true" AllowSorting="true" AllowPaging="true" Query="GridQuery">

                <SfDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

                <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

                <GridColumns>

                    <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" Width="120" AllowFiltering="true"></GridColumn>

                    <GridColumn Field="CustomerID" HeaderText="Customer Name" Width="150" AllowFiltering="true"></GridColumn>

                    <GridColumn Field="Freight" HeaderText="Freight" Format="C2" Width="120" AllowFiltering="true"></GridColumn>

                </GridColumns>

            </SfGrid>

        </div>

    </div>

</div>

 

@code {

    SfGrid<Orders>? Grid { get; set; }

 

    public string CustomerIDValue { get; set; } = "alfki";

 

    public Query GridQuery { get; set; } = new Query().Where("CustomerID", "equal", "alfki");

 

    public void ActionFailureHandler(Syncfusion.Blazor.Grids.FailureEventArgs args)

    {

        // Here, you can get the error details in the args.

    }

    public async Task ValueChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Orders> args)

    {

        GridQuery = new Query().Where("CustomerID", "equal", args.Value);

    }

}

Reference: 
https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor
Data Binding in Blazor DataGrid Component | Syncfusion
Class Query - Blazor API Reference | Syncfusion

Regards,
Prathap Senthil

Attachment: DataGridSample_(3)_cd0babc9.zip