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.
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
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.
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
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> |
Regards,
Rajapandiyan S