Data Grid Filtermenu with DateRange Picker

[Hiral]

Hello, Team

we wanted to Apply custom filter in filter type "MENU" filter date with daterangepicker instead of simple datepicker. So i look around forums and codes. I found below link 

https://www.syncfusion.com/forums/160293/how-to-use-daterangepicker-on-custom-menu-filter-ui

which clearly guide how to do this. Also attached working sample. Thanks for that. but in that we found 2 issue 
- 1. we cannot able to retain the filter value when we click on filtermenu. Daterangepicker selected date also cleared. 

- 2. we are confused is daterangefilter apply button is working as filter so filter button of filter menu will not work ? 


Thanks. 

[Rajapandi Ravi]

Hi Hiral,

Greetings from Syncfusion support

We have checked your query and we could see that you are facing the problem with retain the filter value in the filter menu, based on your query we have prepared a sample and tried to reproduce your reported problem and it was working fine at our end. Please refer the below code example, video demo and sample for more information.

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" actionBegin="onActionBegin" allowFiltering="true" allowPaging="true">

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

    <e-grid-columns>

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

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>

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

        <e-grid-column field="OrderDate" headerText="Order Date" filter="@(new { ui= new { create = "onFilterCreate", write = "onFilterWrite" } })" type="date" format="yMd" width="120"></e-grid-column>

        <e-grid-column field="ShipCity" headerText="Ship City" width="140"></e-grid-column>

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="140"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

<script>

    var startDate;

    var endDate;

    var customFilter;

 

    function onFilterCreate(args) {

        var flValInput = new ej.base.createElement('input', { className: 'flm-input' });

        args.target.appendChild(flValInput);

        var grid = document.getElementById("Grid").ej2_instances[0];

        var date = [];

        grid.filterSettings.columns.forEach(col => {

            if (col.field === "OrderDate")

                date.push(col.value);

        });

        var dateRangeInst = new ej.calendars.DateRangePicker({

            startDate: date[0],

            endDate: date[1],

            change: function (e) {

                if (e != undefined && e.value) {

                    var grid = document.getElementById("Grid").ej2_instances[0];

                    startDate = e.value[0];

                    endDate = e.value[1];

                    customFilter = true;

                    grid.filterByColumn('OrderDate', 'greaterthan', startDate);

                }

 

            }

        });

        dateRangeInst.appendTo(flValInput);

    }

 

    function onFilterWrite(args) {

    }

 

    function onActionBegin(args) {

        if (args.requestType === "filtering" && args.currentFilteringColumn === "OrderDate" && customFilter) {

            customFilter = false;

            args.columns.push({ actualFilterValue: {}, actualOperator: {}, field: "OrderDate", ignoreAccent: false, isForeignKey: false, matchCase: false, operator: "lessthan", predicate: "and", uid: this.getColumnByField(args.currentFilteringColumn).uid, value: endDate });

        }

    }

 

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/178178178144524.zip

Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vd-1965793745.zip

Regards,

Rajapandi R

[Hiral]

excellent Rajapnadi.
You are awesome.
Thanks a lot working fantastic with much better code. 

[Rajapandi Ravi]

Hi Hiral,

We are happy to hear that our provided suggestion was helpful to resolve the problem.

Please get back to us if you need further assistance.

Regards,

Rajapandi R