Query builder using query to select between two dates

[Edmund Herbert]

Hi Guys, I need example of asp net core ej2 Query builder that I can select dates between , the data source date is a Date object (no time) I also need the query to integrate to a grid that uses Ajax function to connect to controller, I am using asp net core 8 with razor pages, I tried to do this but ran into multiple predicate issues.

[Keerthikaran Venkatachalam]

Hi Edmund,

Thank you for reaching out to Syncfusion Support.

We have checked the reported query and prepared a sample to meet your requirements. The Data Grid component is designed to display data based on the filters created using the Query Builder component. We have refreshed the grid's data source in the `ruleChange` event of the Query Builder by utilizing a predicate query. Please refer to the code snippets, sample, demo, and UG link provided below.

<ejs-querybuilder id="querybuilder" width="73%" ruleChange="updateRule">

    <e-querybuilder-columns>

        <e-querybuilder-column field="OrderID" label="Order ID" type="number"></e-querybuilder-column>

        <e-querybuilder-column field="CustomerID" label="Customer Name" type="string"></e-querybuilder-column>

        <e-querybuilder-column field="OrderDate" label="Order Date" type="date"></e-querybuilder-column>

        <e-querybuilder-column field="Freight" label="Freight" type="string"></e-querybuilder-column>

    </e-querybuilder-columns>

</ejs-querybuilder>

 

<ejs-grid id="grid" allowExcelExport="true" allowPdfExport="true" showColumnChooser="true" toolbar="@(new List<string>() {"ExcelExport", "PdfExport", "CsvExport", "Search", "ColumnChooser" })" toolbarClick="toolbarClick" allowFiltering="true" allowSorting="true" allowGrouping="false" allowPaging="true">

    <e-data-manager url="/Home/UrlDataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-data-manager>

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>

    <e-grid-filterSettings type="Menu" showFilterBarOperator="true"></e-grid-filterSettings>

    <e-grid-columns>

        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>

        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>

        <e-grid-column field="OrderDate" headerText=" Order Date" textAlign="Right" format="yMd" width="130"></e-grid-column>

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

<script>

    function updateRule(args) {

        var dataManagerQuery;

        var qryBldrObj = ej.base.getComponent(document.getElementById("querybuilder"), 'query-builder');

        var grid = ej.base.getComponent(document.getElementById("grid"), 'grid');

        var predicate = qryBldrObj.getPredicate(args.rule);

        if (ej.base.isNullOrUndefined(predicate)) {

            dataManagerQuery = new ej.data.Query().select(['CustomerID', 'CompanyName', 'ContactName', 'City']);

        } else {

            dataManagerQuery = new ej.data.Query().select(['CustomerID', 'CompanyName', 'ContactName', 'City']).where(predicate);

        }

        grid.query = dataManagerQuery;

        grid.refresh();

    }

</script>

Demo link: https://ej2.syncfusion.com/aspnetcore/querybuilder/grid#/fluent2

UG link: https://ej2.syncfusion.com/aspnetcore/documentation/query-builder/data-binding?cs-save-lang=1&cs-lang=razor#grid-integration-with-querybuilder

If you are still facing issues, could you please provide details on how you are binding the data to the grid component, along with the exact requirements and a video demonstration? Based on that, we will check and provide you with a better solution quickly. 

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: Core_QB_Grid_Sample_f280577f.zip