Filter questions

[José Luis Casado]

Hi.

How can I disable auto completion in the filter menu.

How can I change background color of a column, for example when adding a filter.

regards!!!

[Renjith Singh Rajendran]

Hi José, 

Greetings from Syncfusion support. 

Query 1 : How can I disable auto completion in the filter menu. 

By default, an SfAutoComplete will be rendered in the Filter Menu of a string valued column in Grid. So this auto completion behavior will be available by default in our Filter Menu for string valued column. Based on your scenario, we suggest you to use custom component in filter menu support to achieve this requirement. 

Reference :  https://blazor.syncfusion.com/documentation/datagrid/filtering/#custom-component-in-filter-menu 

 

You can render a SfTextbox instead of our default SfAutoComplete by using the below codes. Please refer the codes below, 

 

 

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150">    <FilterTemplate>        <SfTextBox  ID="CustomerID" @bind-Value="@((context as PredicateModel<string>).Value)" Placeholder="CustomerID"></SfTextBox>    </FilterTemplate></GridColumn>

 

 

Query 2 : How can I change background color of a column, for example when adding a filter. 

You can customize the Grid columns by using the CustomAttributes property of Grid. With this you can customize the display of particular columns in grid. Please refer the below documentation for more details, 

https://blazor.syncfusion.com/documentation/datagrid/cell/#custom-attributes 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[José Luis Casado]

Dear Sirs

Can you send us code in with which to change the background colour of a column on an event? We would like to change the colour of hose columns in which a filter has been setup. 

What you have sent us is how to change the background colour of any column when the grid is created.

We would also like to disable the auto fill of the filters. The solution that you have sent us (filtertemplate) changes the behaviour of the filter so that the user cannot write in and can just select an option of the dropdown box. What we want is to let the user write in, but no auto fill is run by the system.

[Renjith Singh Rajendran]

Hi José, 

Query 1 : We would like to change the colour of hose columns in which a filter has been setup. 

We suspect that, you would like to change the color of Grid column when apply filtering for the particular column. We have prepared a sample based on this scenario, please download the sample form the link below, 

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

 

We have used OnActionComplete event of Grid. In this event handler based on the Boolean value we will apply style for the class used in CustomAttribute property. Please refer the codes below, 

 

<SfGrid DataSource="@Orders" ...> 

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

    <GridColumns> 

        ... 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" } })" ...></GridColumn> 

    </GridColumns> 

</SfGrid> 

@if(ApplyStyle){    <style>        .e-attr {            background: #d7f0f4;        }    </style>}
public bool ApplyStyle { get; set; } = false;public void OnActionComplete(ActionEventArgs<Order> args){    //Apply style when filtering the freight column     if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Filtering) && args.CurrentFilterObject.Field == "Freight")    {        if(args.CurrentFilteringColumn == "Freight")            ApplyStyle = true;           //when filter applied        else if(String.IsNullOrEmpty(args.CurrentFilteringColumn))            ApplyStyle = false;         //remove style when clear filtering    }}

Query 2 : We would also like to disable the auto fill of the filters. The solution that you have sent us (filtertemplate) changes the behaviour of the filter so that the user cannot write in and can just select an option of the dropdown box. 

We would like to inform you that, you can render any component inside a FilterTemplate. In the documentation we have used SfDropDownList component as an example. As suggested from our previous update, we suggest you to use SfTextbox instead of SfDropDownList component. We have already attached the codes in our previous update. We are reattaching the codes for your convenience, please refer the codes below, 

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150">    <FilterTemplate>        <SfTextBox ID="CustomerID" @bind-Value="@((context as PredicateModel<string>).Value)" Placeholder="CustomerID"></SfTextBox>    </FilterTemplate></GridColumn>

We have also added the above codes in our above attached sample. The custom component(SfTextBox) is rendered for the filter menu in CustomerID column in above attached sample. Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran