Grid filter with datepicker select dropdown operator value programmatically

[George]

I have a filterable column grid with a datepicker:
 
$("#myGrid").kendoGrid({
...
...
field: "myDate",
...
filterable: {
ui: "datepicker"
},
...

Works great. But I will like to preselect the dropdown operator (equal, greater or equal, etc..) based on some criteria, before displaying to the user.
Which event can I use to do that?.
I know I can change some options like the text:

var filterMenuForMyDate = $("#MyGrid").data("kendoGrid").thead.find("th:contains('myDate')").data("kendoFilterMenu");
filterMenuForExportedUTC.options.messages.info = 'My customized text';
..
but I can't find a way to force the operator dropdown to preselect a value before displaying to the user (like a pre-render)
Is there a way to do this?

[Dimiter Madjarov]

Hello George,


To achieve this you could bind to the filterMenuInit event of the Grid. In the event handler you have access to menu container, where you could find and get the data for the DropDownList and set it's value.
E.g.

var ddl = e.container.find("select:eq(0)").data("kendoDropDownList");
ddl.value("eq");

An example is also included in the documentation. I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik

[George]

Thanks for the reply Dimiter. In our case that won't work because the menuinit will trigger only once ant initialization time. We need something that we can hookup every time the filter is requested, not only the first time.
The problem is that we have a custom filter function for the date and that seems to make the datepicker user selected option to go back to the first in the list every time (is equal to).
This is an excerpt of our code:

// get the current filter header column
$("#MyGrid").find(".k-grid-filter").click(function () {
        var parent = $(this).parent();
        currentFilterField = parent.attr("data-field");
    });

// override the filter ui submit filter button event
// for individual column filter
($("form.k-filter-menu")).find("button[type='submit']").live("click", function (e) {
  var $parent = $(this).closest("form.k-filter-menu");
   ...
  if (currentFilterField == 'MyDateHeader' {
   var selectedDate = $parent.find($("input[data-role=datepicker]")).val();
  ..
   $("#MyGrid").data("kendoGrid").dataSource.filter(null);
   ...
   var f = {
      field: datafield,
     //create custom filter operator
     operator: function (fieldDate) {
     ...
      },
      value: selectedDate
    };

   $("#MyGrid").data("kendoGrid").dataSource.filter(f);
}

...

It filters correctly according to our custom filter but it doesn't remember the user selected option from the dropdown the next time the filter is requested and the menuinit doesn't trigger evry time.
Thanks

[Nikolay Rusev]

Hello George,

Maybe the open event of the underlying popup might be of use in this case. It will be hooked once the filter menu is initialized and will be triggered every time the filter menu popup gets opened.

gridInstance.bind("filterMenuInit", function(e) {
 e.container.data("kendoPopup").bind("open", function() {
   console.log("menu open");
   // custom logic goes here
 });
})

 

Regards,
Nikolay Rusev
Telerik

[Dalia]

Thanks, it's working (: