Default operator for 2nd filter & date format

[Steven]

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

[Rosen]

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

 

 

[Steven]

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

 

[Rosen]

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

 

 

[Steven]

Thanks Rosen - that looks to do the trick! Much appreciated.