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

DatePicker on columns with Excel Type Filter

Hi, is it possible on Excel Filter Type to have a DatePicker for Date columns?




This is already working for Menu Filter Type, but not for Excel Filter Type, like this:



Thank you.


3 Replies

RS Rajapandiyan Settu Syncfusion Team November 11, 2022 12:20 PM UTC

Hi Rodrigo,


Thanks for contacting Syncfusion support.


The EJ2 Grid’s Excel filtering works like the MS Excel sheet filter. The normal input element is used to search the values in the Dialog. This is the default behavior of Grid. we don’t have support to show the date picker as the search input in Excel Filter Dialog.


Regards,

Rajapandiyan S



RO Rodrigo replied to Rajapandiyan Settu November 12, 2022 08:18 AM UTC

Hi Rajapandiyan, thanks for your quick response.


How can i avoid the following issue: as the field is string, the user can type anything, in this case i typed "hi" wich gives error and the spinner keeps spinning in a loop.


The UrlDatasource gives error 500:



How is this error avoidable?


Thank you, regards.




RS Rajapandiyan Settu Syncfusion Team November 14, 2022 11:58 AM UTC

Hi Rodrigo,


The EJ2 Grid’s Excel filtering works like MS Excel sheet filter. The normal input element is used to search all the type of values. This is the default behavior of Grid.


You can achieve your requirement by using the following code in the actionComplete event of Grid. In that event, we render the custom DatePicker element and performed the search operation in the change event of date picker component.


actionComplete: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actioncomplete

DatePicker: https://ej2.syncfusion.com/javascript/documentation/datepicker/es5-getting-started/
change: https://ej2.syncfusion.com/javascript/documentation/api/datepicker/#change


[index.cshtml]

<script>

    function actionComplete(args) {

        if (args.requestType == 'filterafteropen' && args.columnType == 'date') {

            // hide the default search box

            if (args.filterModel.dlg.querySelector('.e-searchbox')) {

                args.filterModel.dlg.querySelector('.e-searchbox').style.display = 'none';

            }

            // render the DaterPicker component in filter dialog

            if (args.filterModel.dlg.querySelector('.customSearch') == null) {

                var span = document.createElement('span');

                var input = document.createElement('input');

                input.classList.add('customSearch');

                span.appendChild(input);

                var datepicker = new ej.calendars.DatePicker({

                    change: datePickerChange, // bind the change event

                });

                datepicker.appendTo(input);

                args.filterModel.dlg.querySelector('.e-searchcontainer').insertBefore(span, args.filterModel.dlg.querySelector('.e-searchcontainer').children[0]);

            }

        }

    }

    function datePickerChange(args) {

        // bind the datePicker value to the default search input element

        document.querySelector('.e-searchcontainer .e-searchbox input').value = args.element.value;

        var grid = document.getElementById('Grid').ej2_instances[0]; // get the grid instance

        // manually refreshes the checklists

        grid.filterModule.filterModule.excelFilterBase.refreshCheckboxes();

    }

</script>


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_grid_excelfilter_search_datepicker-726660673.zip


Regards,

Rajapandiyan S


Loader.
Live Chat Icon For mobile
Up arrow icon