Filter with date range

Fabiano Melo

Asked On April 17, 2019 12:14 PM UTC

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?

Reply | Reply with quote

Ravi Kumar

Replied On April 18, 2019 11:34 AM UTC

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.

Reply | Reply with quote

Fabiano Melo

Replied On April 18, 2019 01:18 PM UTC

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!

Reply | Reply with quote

Kuralarasan Muthusamy [Syncfusion]

Replied On April 19, 2019 01:31 PM UTC

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

Reply | Reply with quote

Fabiano Melo

Replied On April 22, 2019 06:38 PM UTC

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();

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On April 24, 2019 10:50 AM UTC

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144081	Apr 17,2019 12:14 PM UTC	Apr 24,2019 10:50 AM UTC	Angular - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US