How create a custom filter column?

[Guillermo Garcia]

Hello,

I want to create a custome filter for some columns where i use a templete for manipulate the data.

I found that i need to use a FilterItemTemplate functionalities for that, but I can’t use a  FilterItemContext like the tamplate or i can't make to work it.

<SfGrid ID="Grid" @ref="DefaultGrid"

                    TValue="WorkOrderDto"

                    DataSource="_workOrders.Value.WorkOrders"

                    AllowFiltering="@_dashboard.Filterable"

                    AllowSorting="@_dashboard.Sortable"

                    ShowColumnChooser="true"

                    Height="100%"

                    Width="100%"

                    AllowExcelExport="true">

                <GridTemplates>

                    <ToolbarTemplate>

                        <SfToolbar>

                            <ToolbarEvents Clicked="ToolbarClickHandler"></ToolbarEvents>

                            <ToolbarItems>

                                <ToolbarItem Type="@ItemType.Button" Id="Grid_excelexport">

                                    <Template>

                                        <button class="btn btn-success btn-sm" TooltipText="Excel Export"><i class="fas fa-file-excel"></i> Excel</button>

                                    </Template>

                                </ToolbarItem>

                            </ToolbarItems>

                        </SfToolbar>

                    </ToolbarTemplate>

                </GridTemplates>

                <GridEvents ExcelQueryCellInfoEvent="ExcelQueryCellInfoHandler" OnToolbarClick="ToolbarClickHandler" TValue="WorkOrderDto"></GridEvents>

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

                <GridColumns>

                    @foreach (var column in _dashboard.Views.OrderBy(a => a.Order).ToList())

                    {

                        var width = column.Width > 0 ? $"{column.Width}" : "120";

                        switch (column.ViewType)

                        {

                            case ViewType.Field:

                                <GridColumn HeaderText="@column.Caption"

                                            Field="@column.ValueName"

                                            Width="@width"

                                            AllowFiltering="@column.Filterable"

                                            AllowSorting="@column.Sortable"

                                            Format="@column.Format">

                                </GridColumn>

                                break;

                            case ViewType.Category:

                                var columnName = @column.ValueName;

                                <GridColumn HeaderText="@column.Caption"

                                            Field="@column.ValueName"

                                            Width="@width"

                                            AllowFiltering="true"

                                            AllowSorting="@column.Sortable"

                                            SortComparer="new CategoryComparer(columnName)">

                                    <Template Context="data">

                                        @{

                                            var order = (data as WorkOrderDto).Categories.FirstOrDefault(a => a.Category == column.ValueName);

                                            if (order != null)

                                            {

                                                <Bubble Color="@order.Color"

                                                        Text="@order.Value?.ToString()"

                                                        HasComments="@order.Comments"

                                                        OnClick="@(() => OpenDetails((data as WorkOrderDto).Id, column.Caption, column.ReadOnly))">

                                                </Bubble>

                                            }

                                            else

                                            {

                                                <Bubble Color="grey"

                                                        Text="N/A"

                                                        HasComments="false">

                                                </Bubble>

                                            }

                                        }

                                    </Template>

                                    <FilterItemTemplate>

                                        @{

                                            var cat = (context as FilterItemTemplateContext);

                                        }

                                    </FilterItemTemplate>

                                </GridColumn>

                                break;

                        }

                    }

                </GridColumns>

            </SfGrid>

Regards!

[Renjith Singh Rajendran]

Hi Guillermo, 

 

Greetings from Syncfusion support. 

 

We are not clear about the exact requirement or the problem you are facing. We suggest you to refer to the below documentation for more details on using FilterItemTemplate and FilterItemTemplateContext. Using FilterItemTemplate  you can customize the checkbox items list shown in the excel dialog. 

Reference : https://blazor.syncfusion.com/documentation/datagrid/excel-like-filter#filter-item-template 

 

If you are still facing difficulties or if you need further assistance, then the following details will be helpful for us to proceed further. 

 

1. Share a detailed explanation of the exact requirement or the problem you are facing.
2. Share a video demo explaining the replication of the problem.
3. Share a simple issue reproducing sample based on your scenario for us to validate.

 

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

 

Regards, 

Renjith R 

[Guillermo Garcia]

Of course, I'll try to explain better, I want to activate the filter in some columns, because I have 2 types of columns, divided by a switch, the second one is my target or how i call “Category”.

The difficulty for us is because i use in those columns a template for get the data, also stroggle for sort the column but I was solve using SortComper functionality, and other difficulti is my objects, is not the same to the data source, exactly is a List of Objects inside my main object, I don’t know if exist some similar like the function "Sortcompare", i read some pages and i found that about FilterItemTemplate, but i dont figured out how can i use.

<SfGrid ID="Grid" @ref="DefaultGrid"

                    TValue="WorkOrderDto"

                    DataSource="_workOrders.Value.WorkOrders"

                    AllowFiltering="@_dashboard.Filterable"

                    AllowSorting="@_dashboard.Sortable"

                    ShowColumnChooser="true"

                    Height="100%"

                    Width="100%"

                    AllowExcelExport="true">

                <GridTemplates>

                    <ToolbarTemplate>

                        <SfToolbar>

                            <ToolbarEvents Clicked="ToolbarClickHandler"></ToolbarEvents>

                            <ToolbarItems>

                                <ToolbarItem Type="@ItemType.Button" Id="Grid_excelexport">

                                    <Template>

                                        <button class="btn btn-success btn-sm" TooltipText="Excel Export"><i class="fas fa-file-excel"></i> Excel</button>

                                    </Template>

                                </ToolbarItem>

                            </ToolbarItems>

                        </SfToolbar>

                    </ToolbarTemplate>

                </GridTemplates>

                <GridEvents ExcelQueryCellInfoEvent="ExcelQueryCellInfoHandler" OnToolbarClick="ToolbarClickHandler" TValue="WorkOrderDto"></GridEvents>

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

                <GridColumns>

                    @foreach (var column in _dashboard.Views.OrderBy(a => a.Order).ToList())

                    {

                        var width = column.Width > 0 ? $"{column.Width}" : "120";

                        switch (column.ViewType)

                        {

                            case ViewType.Field:

                                <GridColumn HeaderText="@column.Caption"

                                            Field="@column.ValueName"

                                            Width="@width"

                                            AllowFiltering="@column.Filterable"

                                            AllowSorting="@column.Sortable"

                                            Format="@column.Format">

                                </GridColumn>

                                break;

                            case ViewType.Category:

                                var columnName = @column.ValueName;

                                <GridColumn HeaderText="@column.Caption"

                                            Field="@column.ValueName"

                                            Width="@width"

                                            AllowFiltering="true"

                                            AllowSorting="@column.Sortable"

                                            SortComparer="new CategoryComparer(columnName)">

                                    <Template Context="data">

                                        @{

                                            var order = (data as WorkOrderDto).Categories.FirstOrDefault(a => a.Category

== column.ValueName);

                                            if (order != null)

                                            {

                                                <Bubble Color="@order.Color"

                                                        Text="@order.Value?.ToString()"

                                                        HasComments="@order.Comments"

                                                        OnClick="@(() => OpenDetails((data as WorkOrderDto).Id, column.Caption, column.ReadOnly))">

                                                </Bubble>

                                            }

                                            else

                                            {

                                                <Bubble Color="grey"

                                                        Text="N/A"

                                                        HasComments="false">

                                                </Bubble>

                                            }

                                        }

                                    </Template>

                                </GridColumn>

                                break;

                        }

                    }

                </GridColumns>

            </SfGrid>

i Hope this help for understand my problem better.

[Renjith Singh Rajendran]

Hi Guillermo, 

 

Thanks for sharing the details. 

 

We have analyzed the shared details. We could see that you are displaying Grid column data using Column Template feature. We would like to inform you that, by default the DataOperations in grid will be performed only based on the Field(@column.ValueName) value contained in the Grid’s DataSource(_workOrders.Value.WorkOrders). This is the default behavior of performing data related operations in Grid.  

 

The Column Template feature is only for display purposes. You can display customized content in grid’s cell using Column Template feature, but data operations will be handled only based on the original data of Field available in DataSource. 

 

Also as informed in our previous update, the FilterItemTemplate feature is for customizing the display of checkbox items list shown in the excel dialog. This is only for display purposes. The underlying data will only be used for performing data actions. 

 

Also we suspect that you are having one to many relation column. We would like to inform you that, currently we don’t have support to perform DataOperations in a column with one to many relationship. We have considered a feature task for this requirement. Please refer the below feedback for future updates regarding the implementation of this feature. 

https://www.syncfusion.com/feedback/12731/provide-data-operation-for-one-to-many-relationship-columns 

 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith R