ASP.NET Core Blazor | Dropdownlist in DataGrid

ASP.NET Core Blazor | Dropdownlist in DataGrid

By default we get a textbox as the filter interface in a Blazor DataGrid. In this video we will discuss how to include a DropDownList as the filter interface instead of the default textbox.

dropdownlist filter in blazor datagrid

We discussed the basics of Blazor DataGrid Filtering in Part 14 of this video series. Click here to watch it.

DropDownList from an Enum

  1. Gender is an Enum.
  2. So, for Gender column it makes more sense to include a DropDownList as the filter interface instead of the default textbox.
  3. We want to create a helper class that generates a list of objects from from Enum
  4. We can then use this list as the data source for the dropdownlist.
using System;
using System.Collections.Generic;
using System.Linq;

namespace BlazorProject.Shared.Utilities
    public class EnumHelper
        public static List<DropDownListItem> ConvertEnumToDropDownSource<T>
            (string initialText, string initialValue)
            List<DropDownListItem> ret = new List<DropDownListItem>();
            var values = Enum.GetValues(typeof(T)).Cast<T>().ToList();

            if (!string.IsNullOrEmpty(initialValue) || !string.IsNullOrEmpty(initialText))
                DropDownListItem ddlInitialItem = new DropDownListItem()
                    Text = initialText,
                    Value = initialValue

            for (int i = 0; i < Enum.GetNames(typeof(T)).Length; i++)
                DropDownListItem ddlItem = new DropDownListItem();
                ddlItem.Text = Enum.GetNames(typeof(T))[i];
                ddlItem.Value = values[i].ToString();


            return ret;

DropDownListItem Class

public class DropDownListItem
    public string Text { get; set; }
    public string Value { get; set; }


  1. AllowFiltering="true" enables filtering.
  2. <FilterTemplate> inside the Gender GirdColumn allows us to use any custom element as the search interface instead of the default textbox.
  3. We want a dropdownlist so we placed <SfDropDownList> component inside the <FilterTemplate>.
@page "/all"
@using Syncfusion.Blazor.DropDowns

<div style="width:700px">
    <SfGrid @ref="employeeGrid" DataSource="@Employees" AllowPaging="true" AllowFiltering="true">
            <GridColumn Field=@nameof(Employee.EmployeeId) HeaderText="ID"></GridColumn>
            <GridColumn Field=@nameof(Employee.FirstName) HeaderText="First Name"></GridColumn>
            <GridColumn Field=@nameof(Employee.LastName) HeaderText=" Last Name"></GridColumn>
            <GridColumn Field=@nameof(Employee.DateOfBrith) HeaderText="Date of Birth"></GridColumn>
            <GridColumn Field=@nameof(Employee.Gender) HeaderText="Gender">
                    <SfDropDownList Placeholder="All" DataSource="@genderDorpDownSource" 
                                    TItem="DropDownListItem" TValue="string">
                        <DropDownListFieldSettings Value="Value" Text="Text">
                        <DropDownListEvents TItem="DropDownListItem" TValue="string" ValueChange="@GenderSelectionChange"></DropDownListEvents>
            <GridColumn Field=@nameof(Employee.Email) HeaderText="Email"></GridColumn>

    public List<Employee> Employees { get; set; }

    public SfGrid<Employee> employeeGrid { get; set; }

    protected void GenderSelectionChange(ChangeEventArgs<string, DropDownListItem> args)
        if (args.Value == "All")
            employeeGrid.FilterByColumn("Gender", "equal", args.Value);

    public IEmployeeService EmployeeService { get; set; }

    List<DropDownListItem> genderDorpDownSource = 
        EnumHelper.ConvertEnumToDropDownSource<Gender>("All", "All");

    protected override async Task OnInitializedAsync()
        Employees = (await EmployeeService.GetAllEmployees()).ToList();

© 2020 Pragimtech. All Rights Reserved.