Filter with date range

[Fabiano Melo]

Hello

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, ...).

https://stackblitz.com/edit/grid-range-date

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?

[Ravi Kumar]

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.

[Fabiano Melo]

Hello

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!

[Kuralarasan Muthusamy]

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. 

actionComplete(args){ 

        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, 

Sample: https://stackblitz.com/edit/grid-range-date-ybtzjw?file=app.component.html 

Regards, 

Kuralarasan M 

[Fabiano Melo]

Thanks for the feedback.

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

document.getElementsByClassName('e-flm_optrdiv')[0].remove();

[Thavasianand Sankaranarayanan]

Hi Fabiano, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.