[Solved] Set filter choices every time the filter is initialized

[Robert]

I want to have a 'begin --> end' date range show when date columns are filtered.

This code snippet works, the first time the filter is opened:

...,
filterMenuInit: function (e) {
            if (e.field === "DateRequested") {
                var beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList");
                beginOperator.value("gte");
                beginOperator.trigger("change");

                var endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList");
                endOperator.value("lte");
                endOperator.trigger("change");
            }
        },
...

However, the next time it is opened, the gte option is shown for both the zero-eth and the 2nd operators. The filterMenuInit is never hit again. How can I make it persist?

Thanks, Bob Graham

[Daniel]

Hello Bob,

The filterMenuInit event is triggered only when the filter menu is being initialized which will happen only once. Why should the event be triggered each time? If you do not wish to allow the user to change the operators then you could disable the dropdownlists. Currently, there isn't a supported event that is triggered when the menu is opened so if this is needed in your scenario then I can suggest to bind a click handler to the filter icon e.g.

$("#grid [data-field='DateRequested'] .k-grid-filter").click(function (e) {
    var filterMenu = $(this).closest("[data-field='DateRequested']").data("kendoFilterMenu");
    var container = filterMenu.form;
});

Regards,
Daniel
Telerik

 

 

[Robert]

Thanks for the reply, Daniel.

Your comment leaves me to wonder, what is losing the setting? I'm not referring to the user changing the setting, I'm saying that the first time the menu is opened, it has the correct filter choices, but any subsequent time the filter is accessed it has the same setting for both drop-downs, even though the user left them as they were. Why would they revert back to another setting than they were initialized to?

I can supply a screencast of the behavior if needed.

Bob

[Daniel]

Hello again Bob,

I am not sure what could be causing the problem. The dropdownlist change event seems to be triggered so the filter model should be updated and the operators should not revert automatically. Could you check this example and let me know if I the problem occurs on your side or if I am missing something?

Regards,
Daniel
Telerik

 

 

[Robert]

Hi Daniel,

Please see attached video from your test. Note that using the "Clear" button is not the only way the template setting is lost.

Thanks, Bob Graham

[Daniel]

Hello Bob,

Indeed, you are right. Sorry for missing this. The filter form will be rebound on dataSource change and so the initial values will be set if the dataSource does not have filters for the field with the lte and gte operators. In that case I can suggest to use the approach with the click handler to set the dropdownlist values again e.g.

filterMenuInit: function (e) {
  if (e.field === "DateRequested") {
      this.thead.find("[data-field='DateRequested'] .k-grid-filter").click(function (e) {
          setOperators();
      });

      var setOperators = function () {
          var beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList");
          beginOperator.value("gte");
          beginOperator.trigger("change");
          var endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList");
          endOperator.value("lte");
          endOperator.trigger("change");
      };

      setOperators();
  }
}

Regards,
Daniel
Telerik