Search results

Provide custom data source and enabling filtering for DropDownList in Blazor DataGrid component

22 Jul 2021 / 2 minutes to read

You can provide custom data source and enable filter option for DropDownList while performing DataGrid editing by using the Edit params property.

While setting new data source for DropDownList using Edit params, you must also specify a new Query property for DropDownList.

This is demonstrated in the below sample code,

Copied to clipboard
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>(){"Add","Edit","Delete","Update","Cancel"})">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" EditType="EditType.DropDownEdit" EditorSettings="@CustomerIDEditParams" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type=ColumnType.Date Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>


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

    protected override void OnInitialized()
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.5 * x,
            OrderDate = DateTime.Now.AddDays(-x),
    public IEditorSettings CustomerIDEditParams = new DropDownEditCellParams
        Params = new DropDownListModel<object, object>() { DataSource = LocalData, AllowFiltering = true }
    public class Order
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    public class Country
        public string CustomerID { get; set; }
        public int? CountryId { get; set; }
    public static List<Order> LocalData = new List<Order> {
                new Order() { CustomerID= "United States" },
                new Order() { CustomerID= "Australia" },
                new Order() { CustomerID= "India" }