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

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
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"
);
}
}
Rosen
Telerik
