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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143743 Apr 3,2019 04:13 PM UTC Apr 11,2019 08:35 AM UTC Angular - EJ 2 5
loading
Tags: Grid
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.

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


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.

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,  

  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. 


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.

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon