Hide empty filter results

[Ruben Ferreira]

Is there a way to hide null or hidden values from the filter popup. I tried adding validations within FilterItemTemplate tag but to no use.

    <SfGrid DataSource="@ObservableIndicadores"

            EnableAdaptiveUI="true"

            EnableHover="true"

            GridLines="GridLine.Horizontal"

            AllowPaging="true"

            AllowExcelExport="true"

            Height="100%"

            Toolbar="_tool"

            AllowTextWrap="true"

            AllowFiltering="true"

            AllowSorting="true"

            @ref="_defaultGrid"

            ID="Grid">

    <GridTemplates>

        <EmptyRecordTemplate>

            <span>No hay indicadores</span>

        </EmptyRecordTemplate>

    </GridTemplates>

    <GridPageSettings PageSize="8"

                      PageSizes="true"/>

    <GridSearchSettings IgnoreAccent="true"

                        IgnoreCase="true"

                        Fields="initSearch"/>

    <GridEvents OnToolbarClick="ToolbarClickHandler"

                ExcelQueryCellInfoEvent="ExcelQueryCellInfoHandler"

                TValue="Indicador"/>

    <GridTextWrapSettings WrapMode="WrapMode.Both"/>

    <GridFilterSettings IgnoreAccent="true"

                        EnableCaseSensitivity="false"

                        Type="FilterType.CheckBox"

                        ShowFilterBarStatus="true"

                        Mode="FilterBarMode.Immediate"/>

    <GridColumns>

...More Columns Above

    <GridColumn HeaderText="Indicador Resumen"

                HeaderTextAlign="TextAlign.Center"

                TextAlign="TextAlign.Justify"

                Type="ColumnType.String"

                Field="@nameof(Indicador.IndicadorResumen.Descripcion)"

                AllowFiltering="@(Indicadores.Any(i => i.IndicadorResumen != null))"

                Visible="EstaEnIndicadorResumenView">

        <FilterItemTemplate>

            @{

                var filterContext = context as FilterItemTemplateContext;

                Indicador indicador = new();

                indicador = Indicadores.FirstOrDefault(i => i.Equals(filterContext!.Record));

            }

            @if (indicador?.IndicadorResumen != null)

            {

                @indicador.IndicadorResumen.Descripcion

            }

            else

            {

                return;

            }

        </FilterItemTemplate>

        <Template>

            @{

                var elemento = context as Indicador;

                if (Indicadores.FirstOrDefault()?.TipoIndicadorId == (int)Codigos.TiposElementos.Productos ||

                    Indicadores.FirstOrDefault()?.TipoIndicadorId == (int)Codigos.TiposElementos.Resultados)

                {

                    var indicadorResumenId = elemento!.IndicadorResumenId;

                    var descripcionResumen = GetIndicadoresResumenDataSource().SingleOrDefault(i => i.Id == indicadorResumenId)?.Descripcion;

                    @if (descripcionResumen is not null)

                    {

                        <span class="text-dark-75 font-weight-bolder d-block font-size-lg">

                            @descripcionResumen

                        </span>

                    }

                    else

                    {

                        <div style="display: flex; justify-content: center; justify-items: center">

                            <div class="svg-icon svg-icon-2x svg-icon-warning">

                                <svg xmlns="http://www.w3.org/2000/svg"

                                     xmlns:xlink="http://www.w3.org/1999/xlink"

                                     width="24px"

                                     height="24px"

                                     viewBox="0 0 24 24">

                                    <g stroke="none"

                                       stroke-width="1"

                                       fill="none"

                                       fill-rule="evenodd">

                                        <rect x="0" y="0" width="24" height="24"/>

                                        <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>

                                        <rect fill="#000000" x="11" y="7" width="2" height="8" rx="1"/>

                                        <rect fill="#000000" x="11" y="16" width="2" height="2" rx="1"/>

                                    </g>

                                </svg>

                            </div>

                        </div>

                    }

                }

            }

        </Template>

    </GridColumn>

    </GridColumns>

    </SfGrid>

Indicador class:

public partial class Indicador

{

    public Indicador()

    {

        Medidas = new HashSet<IndicadorMedida>();

        ElementoIndicadors = new HashSet<ElementoIndicador>();

    }

    public int Id { get; set; }

    [Required]

    public string Descripcion { get; set; }

    public int MedidaId { get; set; }

    public int TipoIndicadorId { get; set; }

    public int SectorId { get; set; }

    public bool? Habilitado { get; set; }

    public int? MetaOdsId { get; set; }

    public virtual MetaOds MetaOds { get; set; }

    public int? IndicadorResumenId { get; set; }

    public int? IndicadorPadreId { get; set; }

    [NotMapped]

    public Indicador IndicadorResumen { get; set; }

    public int Estado { get; set; }

    public int? EstadoFp { get; set; }

    public bool? NecesitaCorreccion { get; set; }

    public virtual TipoIndicador TipoIndicador { get; set; }

    public virtual ICollection<IndicadorMedida> Medidas { get; set; }

    public virtual ICollection<ElementoIndicador> ElementoIndicadors { get; set; }

    public virtual ICollection<IndicadorTipo> IndicadorTipos { get; set; } = new List<IndicadorTipo>();

    public virtual ICollection<ElementoIndicadorContenedor> ElementoIndicadorContenedors { get; set; }

    public int? TierIndicadorId { get; set; }

    public virtual TierIndicador TierIndicador { get; set; }

    [NotMapped]

    public IndicadorOperacionDTO IndicadorOperaciones { get; set; }

    [NotMapped]

    public List<Indicador> IndicadoresResumenHijo { get; set; }

    public ContribucionDesarrollo ContribucionDesarrollo { get; set; }

}

Result:

[Prathap Senthil]

Hi Ruben,

Based on your requirements, we suggest using the FilterDialogOpening event to remove empty values from the assigned datasource in args.checkboxlistdata. This ensures that empty values are not displayed inside the filter dialog. Kindly refer to the code snippet for your reference.

<SfGrid @ref="Grid" TValue="OrderData" AllowFiltering="true" AllowSorting="true" AllowPaging="true" DataSource="@GridData">

    <GridPageSettings PageSize="6"></GridPageSettings>

    <GridEvents FilterDialogOpening="FilterDialogOpeningHandler" TValue="OrderData"></GridEvents>

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>

</SfGrid>

 

@code {

 

 

    public void FilterDialogOpeneHandler(FilterDialogOpenedEventArgs args)

    {

        // Here, you can customize your code.

 

        args.CheckboxListData = //here assign the your customized data.

    }

 

}

Regards,
Prathap s

[Ruben Ferreira]

Dear Prathap, upon checking in my program. I noticed that when I click on the filter button. An exception is thrown. Even if the method is empty. I tried with several different methods related to FilterDialog:

Microsoft.JSInterop.JSException: Could not find 'sfBlazor.Dialog.initialize' ('sfBlazor' was undefined).

Error: Could not find 'sfBlazor.Dialog.initialize' ('sfBlazor' was undefined).

[Monisha Saravanan]

Hi Ruben,

We have prepared a simple sample as per your requirement in our latest version and we could not able to reproduce the reported issue at our end. Kindly check the below attached sample and code snippet for your reference.

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

public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args)

 

{

     if (args.ColumnName == nameof(OrderData.CustomerID))

     {

         List<OrderData> newList = new List<OrderData>();

 

         newList.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));

 

         args.CheckboxListData = newList;

 

     }

 

}

If you still face difficulties then kindly share us the below details from your end.

1. Share us the entire Grid code snippet.
2. Share us the Nuget version used at your end.
3. Share us the column type in which you are facing the mentioned exception.
4. Share us the video demonstration of the reported issue.
5. If possible share us a simple sample or kindly modify the attached sample for your reference.

The above requested details will be very helpful for us to validate the reported issue at our end.

Regards,

Monisha