Need to dynamically use GridFilterSettings along with GridGroupsettings

[Muhammad Waleed]

Muhammad Waleed

Feb 26, 2024 12:16 PM

on my group change all data vipes all maybe becausse of my filtering code which is dynamic .How Shall i handle grouping and filtering together by code

@page "/EmployeeManagement"

@using Syncfusion.Blazor.Grids

@rendermode InteractiveServer

<style>

    .e-grid .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow){

        color:transparent!important;

    }

</style>

<h3>EmployeeManagement</h3>

<div style="max-width:900px">

    <SfGrid TValue="EmployeeModel" AllowGrouping="true" DataSource="@employeeData" AllowSorting="true" AllowPaging="true" AllowFiltering="true" Toolbar="@toolbar" AutoGenerateColumns="true">

        <GridPageSettings PageSize="8"></GridPageSettings>

        <GridGroupSettings Columns="@Initialgroup" ShowDropArea="true" ShowToggleButton="true" ShowGroupedColumn="true" ShowUngroupButton="true" />

        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu" Columns="@FilterableGridFilterColumns"></GridFilterSettings>

        <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>

    </SfGrid>

</div>

@code {

    public List<GridFilterColumn> FilterableGridFilterColumns { get; set; } = new List<GridFilterColumn>();

    private List<EmployeeModel>? employeeData = null;

    private List<object> toolbar = new List<object> { "Add", "Edit", "Delete", "Update", "Cancel", "Search" };

    public string[] Initialgroup = (new string[] { "Gender" });

    protected override void OnInitialized()

    {

        GenerateEmployeeData();

        var filterableColumns = new List<string> { "FirstName", "LastName" };

        foreach (var columnName in filterableColumns)

        {

            var column = new GridFilterColumn { Field = columnName };

            FilterableGridFilterColumns.Add(column);

        }

    }

    private void GenerateEmployeeData()

    {

        employeeData = new List<EmployeeModel>();

        for (int i = 1; i <= 10; i++)

        {

            EmployeeModel emp = new EmployeeModel

                {

                    Id = i,

                    FirstName = "FirstName" + i,

                    LastName = "LastName" + i,

                    JobTitle = "JobTitle" + i,

                    Gender = i % 2 == 0 ? "Male" : "Female",

                    DateOfBirth = DateTime.Now.AddYears(-20).AddMonths(i),

                    ReportToEmpId = i > 3 ? 1 : (int?)null

                };

            employeeData.Add(emp);

        }

    }

    public class EmployeeModel

    {

        public int Id { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string JobTitle { get; set; }

        public string Gender { get; set; }

        public DateTime DateOfBirth { get; set; }

        public int? ReportToEmpId { get; set; }

    }

}

[Monisha Saravanan]

Hi Muhammad Waleed,

We suggest you to use the below way to apply filter dynamically in DataGrid. Here we have applied the filter Predicate object in Columns property of GridFilterSettings component. So that the applied filter will be reflected in DataGrid.

Kindly check the below attached sample and documentation for your reference.

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

Reference: https://blazor.syncfusion.com/documentation/datagrid/filtering#initial-filter-with-multiple-values-for-different-columns

 

<SfGrid DataSource="@GridData" @ref="Grid" AllowFiltering="true" Height="273px" AllowGrouping="true">

    <GridGroupSettings Columns="@Initial"></GridGroupSettings>

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

    <GridEvents DataBound="DataBoundHandler" TValue="OrderData"></GridEvents>

    <GridColumns>

...

    </GridColumns>

</SfGrid>

 

@code {

    public string[] Initial = (new string[] { "CustomerID"});

    public List<OrderData> GridData { get; set; }

    SfGrid<OrderData> Grid;

    public int value { get; set; }

 

    public bool Initialrender = true;

 

    public async Task DataBoundHandler()

    {

        var columns = await Grid.GetColumns();

 

        if (columns != null && Initialrender == true)

        {

            Initialrender = false;

            if (Grid.FilterSettings.Columns == null)

            {

                Grid.FilterSettings.Columns = new List<GridFilterColumn>();

            }

            string CustomerfUid = columns[1].Uid;

            string OrderfUid = columns[0].Uid;

 

            Grid.FilterSettings.Columns.Add(new GridFilterColumn

                {

                    Field = "CustomerID",

                    Operator = Syncfusion.Blazor.Operator.StartsWith,

                    Predicate = "or",

                    Value = "VINET",

                    Uid = CustomerfUid

                });

 

            Grid.FilterSettings.Columns.Add(new GridFilterColumn

                {

                    Field = "CustomerID",

                    Operator = Syncfusion.Blazor.Operator.StartsWith,

                    Predicate = "or",

                    Value = "HANAR",

                    Uid = CustomerfUid

                });

 

            Grid.FilterSettings.Columns.Add(new GridFilterColumn

                {

                    Field = "OrderID",

                    Operator = Syncfusion.Blazor.Operator.LessThan,

                    Predicate = "and",

                    Value = 10250,

                    Uid = OrderfUid

                });

 

            Grid.FilterSettings.Columns.Add(new GridFilterColumn

                {

                    Field = "OrderID",

                    Operator = Syncfusion.Blazor.Operator.NotEqual,

                    Predicate = "and",

                    Value = 10262,

                    Uid = OrderfUid

                });

 

            Grid.Refresh();

        }

    }

}

Please let us know if you have any concerns.

Regards,

Monisha

[Yvan Gilles]

Hi,

Unfortunately, this code generate the warning "BL0005 Component parameters should not be set outside of their declared component. Doing so may result in unexpected behavior at runtime."

How to avoid this ?

(#pragma warning disable BL0005 is not allowed in my company)

thanks

[Prathap Senthil]

Based on the reported problem, to avoid the warning error we suggest to below way to achieve the requirement. Please refer to the code snippet and sample provided below for your reference.

<button @onclick="Clicked">enableFilter</button>

 

<SfGrid @ref="GridInstance" DataSource="@GridData" AllowFiltering="true" Height="273px">

    <GridFilterSettings Mode="Syncfusion.Blazor.Grids.FilterBarMode.Immediate">

        @if(Filter)

        {

            <GridFilterColumns>

                <GridFilterColumn Field="ShipCity" MatchCase=false Operator="Syncfusion.Blazor.Operator.StartsWith" Predicate="and" Value="@ShipCityValue"></GridFilterColumn>

                <GridFilterColumn Field="ShipName" MatchCase=false Operator="Syncfusion.Blazor.Operator.StartsWith" Predicate="and" Value="@ShipNameValue"></GridFilterColumn>

            </GridFilterColumns>

        }

      

    </GridFilterSettings>

    <GridColumns>

        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GridColumn>

        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn>

        <GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>

        <GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="100"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

    public SfGrid<OrderData> GridInstance { get; set; }

    public List<OrderData> GridData { get; set; }

    public bool Filter { get; set; }

    public string ShipCityValue = "reims";

    public string ShipNameValue = "Vins et alcools Chevalier";

    public void Clicked()

    {

        Filter = !Filter;

        GridInstance.Refresh();

    }

 

Sample:https://blazorplayground.syncfusion.com/LXhpMCXvItybsvww