This is a migrated thread and some comments may be shown as answers.

Default operator for 2nd filter & date format

4 Answers 78 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 14 May 2015, 08:59 AM

Hi

I'm wondering if it's possible to set the default operator of a second date filter different to the first. I would like the first filter operator to default to "After or equal to" and the 2nd operator to default to "Before or equal to".

Also, I require the fields in the filter date picker to be formatted as "dd/MM/yyyy". Where can I set that?

Kind Regards

4 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 18 May 2015, 07:06 AM

Hello Steven,

The required functionality can be achieved by handling the filterMenuInit event. Similar to the following:

filterMenuInit: function(e) {
   if (e.field == "OrderDate") { // this is our field
      
     //find the datapickers and use the setOptions method to change the format
     e.container.find("[data-role=datepicker]")
       .kendoDatePicker("setOptions", {
         format: "dd/MM/yyyy"
       });
      
     //find the first operators dropdownlist and set the approprite initial value
     var operators = e.container.find("select:first").getKendoDropDownList();
     operators.value("gte");
      
     //find the second operators dropdownlist and set the approprite initial value
     operators = e.container.find("select:last").getKendoDropDownList();
     operators.value("lte");
   }
 }

Here is a test page which demonstrates this in action.

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Steven
Top achievements
Rank 1
answered on 18 May 2015, 09:09 AM

Hi Rosen

Thanks for the reply. I've tested the code, and whilst it sets the filters when you first click the filter icon, if I select a date from either of the filters, the options in both dropdown lists are reset. Is there anything that can be done to combat this?

Thanks

Steven

 

0
Rosen
Telerik team
answered on 18 May 2015, 10:07 AM

Hello Steven,

Indeed, you are correct. In order to address this you will need to manually trigger the change event of the DropDownList widgets.

filterMenuInit: function(e) {
  if (e.field == "OrderDate") { // this is our field
      
    //find the datapickers and use the setOptions method to change the format
    e.container.find("[data-role=datepicker]")
      .kendoDatePicker("setOptions", {
        format: "dd/MM/yyyy"
      });
      
    //find the first operators dropdownlist and set the approprite initial value
    var operators = e.container.find("select:first").getKendoDropDownList();
    operators.value("gte");
    operators.trigger("change");
      
    //find the second operators dropdownlist and set the approprite initial value
    operators = e.container.find("select:last").getKendoDropDownList();
    operators.value("lte");
    operators.trigger("change");
  }
}

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Steven
Top achievements
Rank 1
answered on 18 May 2015, 01:16 PM
Thanks Rosen - that looks to do the trick! Much appreciated.
Tags
Grid
Asked by
Steven
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Steven
Top achievements
Rank 1
Share this question
or