This is a migrated thread and some comments may be shown as answers.

Custom filter, FilterMenuInit fired only once

7 Answers 590 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rafael
Top achievements
Rank 1
Rafael asked on 18 Dec 2014, 04:25 PM
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

7 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 22 Dec 2014, 09:57 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rafael
Top achievements
Rank 1
answered on 22 Dec 2014, 10:24 AM
Thanks Alexander, that works just fine.
0
Alexander Valchev
Telerik team
answered on 22 Dec 2014, 12:35 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chandra
Top achievements
Rank 1
answered on 12 Aug 2016, 09:07 PM

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

0
Chandra
Top achievements
Rank 1
answered on 12 Aug 2016, 09:16 PM

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

0
Alexander Valchev
Telerik team
answered on 16 Aug 2016, 04:54 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Ed
Top achievements
Rank 1
answered on 06 Mar 2019, 03:47 PM

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.};
Tags
Grid
Asked by
Rafael
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Rafael
Top achievements
Rank 1
Chandra
Top achievements
Rank 1
Ed
Top achievements
Rank 1
Share this question
or