Filter personalized

[Fernando]

Hi,

I would like the filter for this boolean column ("PendenciaCrfAtac") to be personalized, how do I make it so that instead of "true" and "false" appearing, "sim" and "não" appear.

Thanks

@{
    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
            {
                AllowSelection = false,
                Height = "150px",
                Width = "100%",
                Locale = "pt",
                QueryString = "VistoriaId",
                AllowFiltering = true,
                FilterSettings = new GridFilterSettings { Type = FilterType.Excel },
                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="NomeLoja", HeaderText="Galeria", Width="190" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Template="#alertaCriticidade", TextAlign=TextAlign.Center, HeaderText="Criticidade", Width="120" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="StatusGaleriaId", ForeignKeyField="Id", ForeignKeyValue="StatusGal", DataSource=ViewBag.statusgaleria, HeaderText="Retorno Lojista", Width="150" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="DataStatusGaleria", HeaderText="Data", Width="120", Format="dd/MM/yyyy", Type="dateTime" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field = "PendenciaCrfAtac", Template="#pendenciascrfatac", TextAlign=TextAlign.Center, HeaderText="Pendências CRF/ATAC", Width="150" },
            new Syncfusion.EJ2.Grids.GridColumn(){ DisableHtmlEncode=false, Field="Observacao", HeaderText="Observação", Width="300" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Template="#clickPdf", TextAlign=TextAlign.Center, HeaderText="Relatório CRF/ATAC", Width="120" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Template="#clickPdfLojista", TextAlign=TextAlign.Center, HeaderText="Relatório Lojista", Width="120" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="DataRealizada", HeaderText="Data Relatório", Width="120", Format="dd/MM/yyyy", Type="dateTime" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Template="#clickProjeto", TextAlign=TextAlign.Center, HeaderText="Projetos", Width="70" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Template="#clickEvidencias", TextAlign=TextAlign.Center, HeaderText="Evidências", Width="70" }
        }
    };
}

<ejs-grid id="GridGalerias" detailDataBound="detailDataBound" allowSelection="false" allowTextWrap="true" childGrid="ChildGrid" locale="pt" toolbarClick="toolbarClick" gridLines="Both" locale="pt" allowfiltering="true" height="300" allowPaging="true" toolbar="@(new List<string>() { "Search" })">
    <e-data-manager url="@Url.Action("GridGalerias_Read","Galerias")"
                    adaptor="UrlAdaptor" crossDomain="true"></e-data-manager>
    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
     <e-grid-textwrapsettings wrapMode="Both"></e-grid-textwrapsettings>
    <e-grid-columns>
        <e-grid-column field="Nome" headerText="Bandeira" type="string" width="100"></e-grid-column>
        <e-grid-column field="Sigla" headerText="UF" type="string" width="65"></e-grid-column>
        <e-grid-column field="Unidade" headerText="Unidade" type="string" width="120"></e-grid-column>
        <e-grid-column field="SiglaUnidade" headerText="Sigla" type="string" width="100"></e-grid-column>
        <e-grid-column field="Status" headerText="Status Vistoria" type="string" width="180"></e-grid-column>
        <e-grid-column field="DataStatusRelatorio" headerText="Data Status Vistoria" format="dd/MM/yyyy" type="date" width="250"></e-grid-column>
    </e-grid-columns>
</ejs-grid>


<script type="text/x-template" id="pendenciascrfatac">
    ${if(PendenciaCrfAtac == true)}
        <span style="color: red;">sim</span>
    ${else}
        <span style="color: black;">não</span>
    ${/if}
</script>

[Aishwarya Rameshbabu]

Hi Fernando,

Greetings from Syncfusion support.

Upon evaluating your query, we understand that you wanted to customize the filter dialog for the 'Pendências CRF/ATAC' column in the childGrid of the Syncfusion Grid by displaying the filter options as 'sim' and 'não' instead of 'true' and 'false'. Utilizing the provided code example, we have developed a sample that meets your requirements by employing the itemTemplate property within the Filter property of the Grid columns. Please refer to the code example, sample, and screenshot below, where we have tailored the filter options for the 'Pendências CRF/ATAC' column in the childGrid.

Index.cshtml

 

    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()

            {

                AllowSelection = false,

                Height = "150px",

                Width = "100%",

                Locale = "pt",

                DataSource = datas,

                QueryString = "EmployeeID",

                AllowFiltering = true,

                FilterSettings = new Syncfusion.EJ2.Grids.GridFilterSettings{Type= Syncfusion.EJ2.Grids.FilterType.Excel },

                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {

                    new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120", IsPrimaryKey=true },

                    new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="ShipCountry", Width="150" },

                    new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },

                    new Syncfusion.EJ2.Grids.GridColumn(){ Field="Verified", HeaderText="Pendências CRF/ATAC", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center, Filter = new { itemTemplate="#pendenciascrfatac" }, Width="150" }

                },

            };

<script id="pendenciascrfatac" type="text/x-template">

     ${filterTemplate(data)}

   </script>

<script type="text/javascript">

    function filterTemplate(args) {

        if (args.Verified) {

            return "<span style='color: red;'>sim</span>";

        } else {

            return "<span style='color: black;'>não</span>";

        }

    }

</script>

 

Sample: Please find in the attachment.

Screenshot:

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

Attachment: 194437Sample_598292de.zip

[Fernando]

Hi,

It worked perfectly.

Thanks

[Aishwarya Rameshbabu]

Hi Fernando,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards

Aishwarya R