Customizing Datagrid filter

[À la mode Clothing Outlet]

Hi, i have a Syncfusion Blazor Datagrid and I've managed to customize the header background color as shown in the picture attached, but I have no clue how to customize the filter templates. I would like to possibly change the color of the filter backgrounds as well as remove those border lines. Your assistance will be highly appreciated!

[Prathap Senthil]

Hi À la mode Clothing Outlet,

Based on your requirements, we suggest using the following CSS customization to achieve your goal. Please refer to the code snippet and sample below for your reference.

<SfGrid DataSource="@GridData" @ref="Grid"  AllowFiltering="true" Height="273px">

    <GridEditSettings AllowEditing="true"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(OrderData.OrderID) IsPrimaryKey HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GridColumn>

        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120">

            <FilterTemplate>

                <SfDropDownList  ID="CustomerID" @bind-Value="@stringvalue" DataSource="@CustomerIDDropdown" TValue="string" TItem="string">

                    <DropDownListEvents ValueChange="@DropDownValueChange" TItem="string" TValue="string"></DropDownListEvents>

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

                </SfDropDownList>

            </FilterTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>

        <GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="100"></GridColumn>

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

            <FilterTemplate>

                <SfDropDownList  Placeholder="Type" ID="Type" Value="@((string)(context as  Syncfusion.Blazor.Grids.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>

 

<style>

    .e-grid .e-filterdiv .e-input-group {

        background: #ADD8E6;

        border: none;

    }

</style>

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

Regards,
Prathap Senthil

[À la mode Clothing Outlet]

That did it! Much appreciated!

[Prathap Senthil]

Thanks for the update,

We are happy to hear that the provided information was helpful.

Please get back to us if you have further queries.