Articles in this section
Category / Section

How to create date range filter for Pivot Table

1 min read

You can apply the date range filter by using the DataManager predicate class. The following filter operators are supported by the DataManager for applying the filter.

 

  • greaterthan
  • greaterthanorequal
  • lessthan
  • lessthanorequal
  • equal
  • notequal
  • startswith
  • endswith
  • contains

 

The following code snippet demonstrates how to apply the range filter by using the DataManager predicate class.

 

Javascript

    var firstValue = '1996-07-04T00:00:00.000Z';
    var secondValue = '1996-09-13T00:00:00.000Z';
 
    var daterangepicker = new ej.calendars.DateRangePicker({
        close: renderGrid,
        select: function (args) {
            if (args.startDate) {
                firstValue = args.startDate.toISOString();
            }
 
            if (args.endDate) {
                secondValue = args.endDate.toISOString();
            }
        }
    });
    daterangepicker.appendTo('#daterangepicker');
 
    //Here 'OrderDate' specifies the particular field name which is used for the filtering in the data set.
    //'greaterthanorequal' specifies the condition.
    //firstValue denotes start date.
    // Boolean value denotes match case property.
 
    var mPredicate = new ej.data.Predicate('OrderDate', 'greaterthanorequal', firstValue, true, true);
    mPredicate.and('OrderDate', 'lessthanorequal', secondValue, true, true);
 
    var remoteData;
    new ej.data.DataManager(order).executeQuery(new ej.data.Query().where(mPredicate)).then(function (e) {
        remoteData = e.result;
        var pivotGridObj = new ej.pivotview.PivotView({
            dataSource: {
                data: remoteData,
                expandAll: true,
                filters: [],
                formatSettings: [{ name: 'OrderDate', format: 'dd/MM/yyyy', type: 'date' }],
                columns: [{ name: 'OrderDate' }],
                rows: [{ name: 'OrderID' }],
                values: [{ name: 'Freight' }]
            },
            showFieldList: true,
            height: 300,
            width: '100%',
            gridSettings: { columnWidth: 120 }
        });
        pivotGridObj.appendTo('#PivotView1');
    });
 
    function renderGrid() {
        var pivotGridObj = document.getElementById('PivotView1').ej2_instances[0];
        var mPredicate = new ej.data.Predicate('OrderDate', 'greaterthanorequal', firstValue, true, true);
        mPredicate.and('OrderDate', 'lessthanorequal', secondValue, true, true);
        var remoteData;
        new ej.data.DataManager(order).executeQuery(new ej.data.Query().where(mPredicate)).then(function (e) {
            remoteData = e.result;
            pivotGridObj.dataSource.data = remoteData;
        });
    }
</script>

 

For the detailed filter option in DataManager, refer to the following document link.

https://ej2.syncfusion.com/javascript/documentation/data/querying.html#filtering

 

Sample link: Render-pivot tabel-by-using-date-range-filter

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied