Column filter

[Társis]

Good morning,

I have a boolean type column in my grid and the column filter works fine if I type "true" or "false". But I wanna filter with something else like "Sim" (true) or "Não" (false). How could I get that?

Another thing, in your grid example you have that piece of code if (employee.Status == "Active")

                                    {
                                        <div class="statustemp e-activecolor">
                                            <span class="statustxt e-activecolor">@employee.Status</span>
                                        </div>
                                    }
                                    else
                                    {
                                        <div class="statustemp e-inactivecolor">
                                            <span class="statustxt e-inactivecolor">@employee.Status</span>
                                        </div>
                                    }

where did you get that CSS classes? class="statustemp e-activecolor"

Thanks in advance!

[Vignesh Natarajan]

Hi Társis, 

 

Thanks for contacting Syncfusion support.  

 

Query: “But I wanna filter with something else like "Sim" (true) or "Não" (false). How could I get that?” 

 

From your query we understand that you want to filter the Boolean column using text Sim for true and Não for false. But we need some more details about your requirement. So can you please share the following details.  

 

1. Share the type of Filtering used? (i.e.) Excel, Filterbar, Menu. etc
2. How the Boolean values are displayed in Grid? (text (True/ False or Sim/Nao)).
3. Share the Grid rendering code.

 

Requested details will be helpful for us to validate the reported issue at our end and provide the details as soon as possible.  

 

Query2: “where did you get that CSS classes? class="statustemp e-activecolor"” 

 

We have define the class in the style section of our demo section. Please find the detail from below  

 

<style>    .statustemp.e-activecolor {        background-color: #ccffcc;        width: 57px;    }</style>

 

   

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan. 

[Társis]

Good morning! Thank you for your answer. Here is my rendering code for the grid.

<SfGrid DataSource="@Dados" AllowPaging="true" AllowSorting="true" AllowResizing="true" AllowReordering="true" AllowFiltering="true">
                <GridPageSettings PageCount="5"></GridPageSettings>
                <GridEvents RowSelected="((e) => AoSelecionarLinha.InvokeAsync(e))" TValue="PessoaModel" />
                <GridColumns>
                    <GridColumn Field=@nameof(PessoaModel.Id) HeaderText="ID" TextAlign="@TextAlign.Right" Width="80"></GridColumn>
                    <GridColumn Field=@nameof(PessoaModel.Nome) HeaderText="Nome" Width="370"></GridColumn>
                    <GridColumn Field=@nameof(PessoaModel.CNPJFormatado) HeaderText="CNPJ/CPF" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(PessoaModel.DtCadastro) HeaderText="Data Cadastro" Type="ColumnType.Date" TextAlign="@TextAlign.Right" Width="130" Format="dd/MM/yyyy"></GridColumn>
                    <GridColumn Field=@nameof(PessoaModel.Ativo) HeaderText="Status" Type="ColumnType.Boolean" TextAlign="@TextAlign.Center" Width="90">
                        <Template>
                            @{
                                var pessoa = (context as PessoaModel);
                                if (pessoa.Ativo)
                                {
                                    <div class="statustemp active">
                                        <span>Ativo</span>
                                    </div>
                                }
                                else
                                {
                                    <div class="statustemp inactive">
                                        <span>Inativo</span>
                                    </div>
                                }
                            }
                        </Template>
                    </GridColumn>
                </GridColumns>
            </SfGrid>

In that case, I would like to filter the status column with "Ativo" or "Inativo. The PessoaModel.Ativo is a boolean type.

[Vignesh Natarajan]

Hi Társis, 

 

Thanks for the update. 

 

We have achieved your requirement using OnActionBegin event and Query property of Grid. OnActionBegin event will be triggered when an certain actions initiated in Grid. In the event we have changed the Query property to filter the Verified column based on the typed value.  

 

Refer the below code example.  

 

@using Syncfusion.Blazor.Grids 

@using Syncfusion.Blazor.Data 

  

<SfGrid DataSource="@Orders" Query="@Qry" AllowFiltering="true" AllowPaging="true"> 

    <GridEvents OnActionBegin="OnBegin" TValue="Order"></GridEvents> 

. . . . . . . . . . . 

</SfGrid> 

@code{ 

    public Query Qry { get; set; } 

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

    public void OnBegin(ActionEventArgs<Order> Args) 

    { 

        if(Args.RequestType == Syncfusion.Blazor.Grids.Action.Filtering) 

        { 

            if(Args.CurrentFilterObject.Field == "Verified") 

            { 

if(Args.CurrentFilterObject.Value.ToString() == "Ativo")                {                    Args.Cancel = true; // prevent the default action                    Qry = new Query().Where("Verified", "equal", true); // modify the query to filter the true records                 }                else if(Args.CurrentFilterObject.Value.ToString() == "Inativo")                {                    Args.Cancel = true; // prevent the default actions.                    Qry = new Query().Where("Verified", "equal", false);// to filter the false records                }                else                {                    Qry = new Query(); // to clear the filtering                }

            } 

        } 

    } 

. . . . . . . . . .  

} 

 

   

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/152960/ze/BlazorApp1-327268025  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/grid/events/#onactionbegin  

 

Kindly get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan