Blazor Grid Custom Filter Dropdown

[Amjad Khan]

Hi,

I am trying to setup a custom dropdown filter in Blazor Grid. As following:

<GridColumn Field=Project HeaderText="Project" Width="18">

                <FilterTemplate>

                    <SfDropDownList PlaceHolder="Project" ID="ProjectName" Value="@((string)(context as PredicateModel).Value)" DataSource="@ProjectDropDown" TValue="string" TItem="ProjectData">

                        <DropDownListEvents ValueChange="ProjectChange" TValue="string"></DropDownListEvents>

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

                    </SfDropDownList>

                </FilterTemplate>

            </GridColumn>

public void ProjectChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)

    {

        if (args.Value == "All")

        {

            Grid.ClearFiltering();

        }

        else

        {

            Grid.FilterByColumn("ProjectName", "contains", args.Value);

        }

    }

    class ProjectData

    {

        public string ProjectName { get; set; }

    }

    List<ProjectData> ProjectDropDown = new List<ProjectData>

    {

    new ProjectData { ProjectName= "All" },

    new ProjectData { ProjectName= "DHA Lahore" },

    new ProjectData { ProjectName= "LDA City" }

    };

The problem is that I get compile error:

Does DropDownListEvents require a TItem type parameter? Can you please send a working sample?

Thanks,

Amjad.

[Jeevakanth Palaniappan]

Hi Amjad, 

 

Greetings from Syncfusion support. 

Yes DropDownListEvents requires TItem so we suggest you to do the below changes. TItem is the model class that is bound to the SfDropDownList. Please refer the code snippet and the sample for your reference. 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp2146505369 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"> 

            <FilterTemplate> 

                <SfDropDownList PlaceHolder="Customer Name" ID="CustomerID" Value="@((string)(context as PredicateModel).Value)" DataSource="@Dropdown" TValue="string" TItem="Data"> 

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

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

                </SfDropDownList> 

            </FilterTemplate> 

        </GridColumn> 

 

@code{ 

 

    public void Change(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Data> args) 

    { 

        if (args.Value == "All") 

        { 

            Grid.ClearFiltering(); 

        } 

        else 

        { 

            Grid.FilterByColumn("CustomerID", "contains", args.Value); 

        } 

    } 

 

} 

Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP.