We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Data Grid Filtermenu with DateRange Picker

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. 


3 Replies 1 reply marked as answer

RR Rajapandi Ravi Syncfusion Team October 14, 2022 05:32 AM

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


Marked as answer

HI Hiral October 18, 2022 09:04 AM

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



RR Rajapandi Ravi Syncfusion Team October 19, 2022 12:28 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon