Inital value in FilterTemplate with dropdown list.

[Patrik Hermansson]

Hi

Im trying to use this example. 

https://blazor.syncfusion.com/documentation/datagrid/filtering#filter-enum-column

What I want to archive is to set a value in the dropdown when I load the page for the first time. In this example I to "Replace". But I dont see any way to set the value. 

Is it possible?

The reason I want to do this is that I need to filter the data when the page loads as the amount of data. Is there any other way to do this?

[Monisha Saravanan]

Hi Patrik,

Greetings from Syncfusion.

We suggest you to use the programmatic filtering( using FilterByColumnAsync) inside the DataBound event of Grid. So that the filtering will be applied along with the page loads. Kindly check the below attached sample and code snippet for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/events#databound

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

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

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true">

    <GridEvents DataBound="DataBound" TValue="Order"/>

    <GridColumns>

        <GridColumn Field=@nameof(Order.Type) HeaderText="Type" Type="Syncfusion.Blazor.Grids.ColumnType.String" Width="130">

            <FilterTemplate>

                <SfDropDownList Placeholder="Type" ID="Type" Value="@((string)(context as PredicateModel).Value)" DataSource="@FilterDropData" TValue="string" TItem="Data">

                    <DropDownListEvents TItem="Data" ValueChange="Change" TValue="string"></DropDownListEvents>

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

                </SfDropDownList>

            </FilterTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

    public SfGrid<Order> Grid;

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

    public async Task DataBound()

    {

         await this.Grid.FilterByColumnAsync("Type", "contains", "Replace");

    }

}

 

Please let us know if you have any concerns.

Regards,

Monisha

[Patrik Hermansson]

Hi

I dont see how I can filter the results when I load them from the database with this solution. I tried to edit the change method, but it dont works.

I changed the playground example a little like this.

I created a list name FilteredList which is a list of order. In

OnInitialized I filter the order collection .Where (i => i.Type == FileType.Replace) and store the result in the FilteredList .

When I now change the dropdown list I want to filter the Order list again (execute against the db in real life), with the new selectedValue. So if I change to

Delta in the dropdown I want to filter with .Where(i => i.Type == FileType.Delta)

Hope you can help me. 

[Monisha Saravanan]

Hi Patrik,

We suggest you to try using the Query property of Grid to perform filtering. In the below documentation we have changed the Query property by using button click. Similarly try changing the Query property based on the filtered value inside ValueChange event of Dropdown. Modifying Query property will refresh the Grid with new set of data.

Reference: https://blazor.syncfusion.com/documentation/datagrid/data-binding#change-query-parameter-value-dynamically

I changed the playground example a little like this. -> if possible kindly share us the sample modified. So that we will check and share the possible solution.