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

[Ebenezer]

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.

[Pavithra Subramaniyam]

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. 

[Ebenezer]

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.

[Pavithra Subramaniyam]

Hi Ebenezer, 

Thanks for your detailed update. 

From your update, what we have understood is,  

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

            a) Include selected dates 

            b) Exclude selected dates. 

3. While choosing the option

1. Include selected dates,

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

4. While choosing the option

2.  Exclude selected dates,

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

5. 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. 

[Ebenezer]

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.

[Pavithra Subramaniyam]

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.  

1. If you choose the option “Include selected dates”, then  you can filter the StartDate column with dates between the selected range.  
2. 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.
3. 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.
4. 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.
5. If the selected start date is greater than the selected end date, then the Filter button will be “disabled” by using the change event.
6. For applying filter or close the Dialog, we have shown Filter and Clear button in that Dialog popup.

Please refer the below sample link and documentation link. 

 

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

 

Documentation link: https://ej2.syncfusion.com/angular/documentation/grid/filtering/?no-cache=1#custom-component-in-filter-menu 

                                       https://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started/?no-cache=1  

                                       https://ej2.syncfusion.com/angular/documentation/datepicker/getting-started/?no-cache=1  

 

API reference          : https://ej2.syncfusion.com/documentation/api/grid#load  

                                     https://ej2.syncfusion.com/documentation/api/datepicker#change  

                                    

Please get back to us for further assistance. 

 

Regards, 

Pavithra S.