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

Filter with date range


Using the example below in stackblitz, how do I just leave the datapicker, hiding the combobox with the options (equal, greater than, greater than or equal, ...).


Another doubt, this example is with local data, right! In the case of using serve-side data, do I have to make any changes with respect to the filter, or just loaded my data into the grid as per my API return, as I'm already doing?

5 Replies

RK Ravi Kumar April 18, 2019 06:34 AM

New filter:
app.filter("myfilter", function($filter) {
return function(items, from, to, dateField) {
startDate = moment(from);
endDate = moment(to);
return $filter('filter')(items, function(elem) {
var date = moment(elem[dateField]);
return date >= startDate && date <= endDate;
Hope this code will help you. If you want more enhance your skills then you can go for Angular Course.

FM Fabiano Melo April 18, 2019 08:18 AM


I believe you have not understood my question. And I do not think he looked at the example in the Stackblitz that I posted (https://stackblitz.com/edit/grid-range-date). Your interpretation of my question was not satisfactory! Must improve!

What I need is to just show the datapicker and hide the combobox in the menu type filter in the grid component of syncfusion.

With respect to the angular course, I do not think I need it! For my doubt has no respect to Angular, but to the requirements of the syncfusion tool. That is, the question was only if, in the case of using serve-side data consumption, there is some difference in the filter parameters of the syncfusion grid component! Or does it remain as it is?

Thank you for the attention EXCELLENT service!

KM Kuralarasan Muthusamy Syncfusion Team April 19, 2019 08:31 AM

Hi Fabiano, 

Thanks for contacting Syncfusion support. 

From your query, we found that you want to hide the dropDownList from the Grid Menu filter dialog. You can achieve this requirement by simply adding the hidden property to the dropDownList element, after filter dialog will be opened. In the below code we have added the hidden property to the dropDownList by using actionComplete event of the Grid. 

        if (args.requestType == "filterafteropen" && args.columnName == "projects_StartDate") 
            args.filterModel.dlgObj.element.querySelector('.e-flm_optrdiv').hidden = true; 

We have modified your sample with this code and you can find that modified sample in the below link, 

Kuralarasan M 

FM Fabiano Melo April 22, 2019 01:38 PM

Thanks for the feedback.

I was able to do it the following way, but I will do as I said.


TS Thavasianand Sankaranarayanan Syncfusion Team April 24, 2019 05:50 AM

Hi Fabiano, 
We are happy that the problem has been solved. 
Please get back to us if you need any further assistance.  
Thavasianand S.

Live Chat Icon For mobile
Up arrow icon