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

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

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.

5 Replies

PS Pavithra Subramaniyam Syncfusion Team April 4, 2019 02:35 AM

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); 
        }, 
       .  .  .  . 
      } 
    } 
  } 
} 
 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 



EB Ebenezer April 4, 2019 06:33 AM

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.


PS Pavithra Subramaniyam Syncfusion Team April 4, 2019 09:43 PM

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. 
  1. While choosing the option
  1. Include selected dates,
            you want to filter the StartDate column with dates between the selected range.  
  1. While choosing the option
  1.  Exclude selected dates,
             you want to filter the StartDate column with dates except the selected range. 
  1. 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. 



EB Ebenezer April 5, 2019 12:01 AM

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.


PS Pavithra Subramaniyam Syncfusion Team April 11, 2019 12:35 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon