css render in Tabs

Hi, I am showing query builder in a modal dialog. I need that when closing the modal the filters are reset and the grid returns to its initial state. I have not been able to achieve it.


Image_5610_1691267876487


Image_8990_1691267889202

can i use this method?

Image_4583_1691267903649


1 Reply 1 reply marked as answer

KV Keerthikaran Venkatachalam Syncfusion Team August 7, 2023 04:24 PM UTC

Hi Sergio,


We have checked the reported query, and while closing the modal, you can reset the QueryBuilder instance to achieve your requirements. Kindly refer to the below code snippet.


<div class="col-lg-12 control-section">

    <SfQueryBuilder @ref="querybuilder" TValue="Order" DataSource="@Orders">

        <QueryBuilderEvents TValue="Order" RuleChanged="updateRule"></QueryBuilderEvents>

    </SfQueryBuilder>

</div>

<div class="col-lg-12 control-section">

    <div class="content-wrapper">

        <div class="row">

            <SfGrid DataSource="@gridData" AllowPaging="true">

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

                <GridColumns>

                    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

                    <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

                    <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

                    <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

                </GridColumns>

            </SfGrid>

        </div>

    </div>

</div>

@code{

    private SfQueryBuilder<Order> querybuilder;

    public List<Order> gridData;

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

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

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 75).Select(x => new Order()

            {

                OrderID = 1000 + x,

                CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

                Freight = 2.1 * x,

                OrderDate = DateTime.Now.AddDays(-x),

            }).ToList();

        gridData = Orders;

    }

    private List<RuleModel> importRules = new List<RuleModel>()

    {

        new RuleModel { Label="CustomerID", Field="CustomerID", Type="String", Operator="equal", Value="BOLID" }

    };

    private async Task updateRule(Syncfusion.Blazor.QueryBuilder.RuleChangeEventArgs args)

    {

        if (querybuilder.GetValidRules().Rules.Count > 0)

        {

            gridData = querybuilder.GetFilteredRecords().ToList();

        } else

        {

            gridData = Orders;

        }

        StateHasChanged();

    }

    private async Task click()

    {

        querybuilder.Reset();

        await updateRule(null!);

    }

}


Get back to us if you need any further assistance on this.


Regards,

KeerthiKaran K V


Marked as answer
Loader.
Up arrow icon