I would like to implement the customized filter options for our application.

Ebenezer

Asked On April 3, 2019 04:13 PM UTC

Hi Syncfusion Team

We have columns in our data grids like start date and end date, currently we are using date range picker to filter records in between two dates.

But we need some thing else than regular.

1. I would like to show two calendar inputs in filter popup one for start date and another for end date.

2. In the filter menu , I need options such as

a) Include Selected dates

b) Exclude Selected dates

c)Disable the OK buttons until the selected date range is valid.

d) Filter the data between selected dates.

Hope you respond ASAP.

Please provide Stackblitz link and syncfusion documentation link.

Regards

Ebenezer Justin.

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On April 4, 2019 10:35 AM UTC

Hi Ebenezer,

Thanks for contacting Syncfusion support.

We have checked your query and you can achieve your requirement by using “min” and “max” property of DateRangePicker. We have prepared a sample where you can select only the valid date & filter the data between the selected dates. Please refer the below code example, sample link and documentation link.

[app.component.ts]

export class AppComponent implements OnInit {

@ViewChild("grid")

public grid: GridComponent;

. . . .

ngOnInit() {

. . . .

this.templateOptions = {

ui: {

create: (args: { target: Element, column: Object }) => {

let db: Object = new DataManager(this.data);

let flValInput: HTMLElement = createElement('input', { className: 'flm-input' });

args.target.appendChild(flValInput);

var _this = this;

this.dateRangePicker = new DateRangePicker({

min: new Date('1/15/2019'),

max: new Date('12/20/2019'), // you can only select the date between this range

change: function (e) {

. . . .

},

});

this.dateRangePicker.appendTo(flValInput);

},

. . . .

}

Sample link: https://stackblitz.com/edit/angular-nzengp-q8vhpf?file=app.component.ts

Documentation link: https://ej2.syncfusion.com/documentation/daterangepicker/getting-started/

Please get back to us for further assistance.

Regards,

Pavithra S.

Reply | Reply with quote

Ebenezer

Replied On April 4, 2019 02:33 PM UTC

Hi Syncfusion Team

This answer is not suitable for our query.

Please see below image for our requirement.

Hope you understand our requirement.

Please let me know if you any queries before you proceed.

Regards

Ebenezer Justin.

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On April 5, 2019 05:43 AM UTC

Hi Ebenezer,

Thanks for your detailed update.

From your update, what we have understood is,

While clicking the StartDate column filter menu, you want to show a Dialog popup with DropDownList, two DatePicker controls, cancel and Apply buttons.
The DropDownList should has two options

a) Include selected dates

b) Exclude selected dates.

While choosing the option

Include selected dates,

you want to filter the StartDate column with dates between the selected range.

While choosing the option

Exclude selected dates,

you want to filter the StartDate column with dates except the selected range.

For applying filter or close the Dialog you want to show Apply and Cancel button in that Dialog popup.

If the above steps meet your requirement, we will provide a custom sample for that. If we misunderstood your requirement, Please share detailed steps to achieve your requirement. We will make every effort to achieve your requirement.

Regards,

Pavithra S.

Reply | Reply with quote

Ebenezer

Replied On April 5, 2019 08:01 AM UTC

Hi Syncfusion Team

You understood our requirement correctly. Add below 2 features also in your sample.

Please Provide a Stackblitz sample for our requirement.

Apply Button should not enable if the start date is greater than end date i.e., user provided dates must be valid.

1. If user doesn't provide start date and end date disable the Apply button.

2. If user provide only start date then enable Apply Button and filter records including/excluding the start date.

Regards

Ebenezer Justin.

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On April 11, 2019 08:35 AM UTC

Hi Ebenezer,

Thanks for your patience.

Based on your requirements we have prepared a custom sample in which, while opening the filter menu, we have shown the Dialog popup with DropDownList, two DatePicker controls, clear and Filter buttons.

If you choose the option “Include selected dates”, then you can filter the StartDate column with dates between the selected range.
If you choose the option “Exclude selected dates”, then you can filter the StartDate column with dates except the selected range by creating predicate value and set this predicate value to grid query.
If you doesn’t choose start date or end date then the Filter button will be set as “disabled” by using the click function in the load event.
If you select only the start date, then the Filter button will be “enabled” by using the change event of DatePicker which is triggered while the calendar value is changed.
If the selected start date is greater than the selected end date, then the Filter button will be “disabled” by using the change event.
For applying filter or close the Dialog, we have shown Filter and Clear button in that Dialog popup.