Custom filter, FilterMenuInit fired only once

[Rafael]

Hello

I have tried successfully to create a grid filter with preset options by using FilterMenuInit() and it works fine at the first time.
However, I noticed that function is only called once, but the filter options are reset after some value is applied or the filter is cleared.

In order to reproduce this behavior, the sample from this thread may be used: http://www.telerik.com/forums/how-to-define-a-kendo-grid-column-filter-between-two-dates
at http://dojo.telerik.com/@pesho/UMIw/3

In that sample, click on the filter for "Order Date". In the first run, it will display options for gte and lte. Then, simply click on Clear and fire it up again. Now, both filters are set to the option "Is equal to".

Is there any way to work around that issue without also binding to the button actions in the Filter?

Regads,
Rafael

[Alexander Valchev]

Hello Rafael,

I can suggest the following workaround:

$scope.filterInit = function (e) {
  e.container.data("kendoPopup").bind("open", function() { //bind to the open of the filter menu popup
    alert('the type is -> ' + e.sender.dataSource.options.schema.model.fields[e.field].type);
    if (e.field == "OrderDate") {
      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");
    }
  });
};

For your convenience I updated the Kendo Dojo sample: http://dojo.telerik.com/@valchev/iZoXe

Regards,
Alexander Valchev
Telerik

 

 

[Rafael]

Thanks Alexander, that works just fine.

[Alexander Valchev]

Hi Rafael,

I am glad to hear that the approach suits in your case. Just a little follow up - for performance optimization you may move the "if" clause outside of the bind event handler:

$scope.filterInit = function (e) {
  alert('the type is -> ' + e.sender.dataSource.options.schema.model.fields[e.field].type);
  if (e.field == "OrderDate") {

    e.container.data("kendoPopup").bind("open", 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");
    });

  }
};

In this way you will bind to the open event of the OrderDate filter menu only. With the previous approach you are binding the open event of all filter menu popups and are checking inside the event handler if the field is the one you need.

Regards,
Alexander Valchev
Telerik

 

 

[Chandra]

Hi,

I have a similar situation as OP and I am using the similar code.

There is another bug with the  suggested fix . When I select some date in the 'lte' datepicker (second picker) and hit submit.

Next time when I open the filter, the selected date appears in the first datepicker.

The issue can be replicated in the Dojo sample Alexander gave

http://dojo.telerik.com/@valchev/iZoXe

How do I fix it? Thanks

[Chandra]

Update to my earlier question.

Looks like that is the behavior in all the filter controls, not just the custom ones.

Is there any fix for that? Where the earlier search appears in the correct control?

Thanks

[Alexander Valchev]

Hello Chandra,

This thread is very old. The example that you reference uses outdated Kendo UI version.
Please upgrade your project to the latest release and let me know if the issue still persists.

Regards,
Alexander Valchev
Telerik by Progress

 

 

[Ed]

Hi, Alexander.

For those of us who still haven't been able to dedicate the resources to upgrading to newer Kendo UI versions, your suggestion of attaching event handlers to the menu filter popup dialog works well. Because the older versions of Kendo don't support the filterMenuInit and filterMenuOpen events, equivalent functionality can be implemented by binding an "open" handler to the popup widget when the column filter's "ui" function is executed to create the filter input dialog.

Here is an example of synchronizing a dropdown widget from another widget every time the filter dialog is opened:

01.function createFilterUI (element) {
02.    // Replace input with a dropdown list.
03.    var dropdownlist = element.kendoDropDownList({ }).data("kendoDropDownList");
04.    // Handle filter menu open event to manipulate filter controls.
05.    var popup = $(element).closest(".k-filter-menu.k-popup").data("kendoPopup");
06.    popup.bind("open", function (e) {
07.        // Synchronize controls every time the filter dialog is opened.
08.        dropdownlist.value($("#otherDDL").data("kendoDropDownList").value());
09.        console.log("filter popup opened");
10.    });
11.};