CODEWITHSUNDEEP
javascriptkendo-ui
Prisoner ZERO
Prisoner ZERO

Reputation: 14176

KendoUI ComboBox Change Event Runs Multiple Times

I have an MVC Control for a KendoUI ComboBox that does NOT setup the Change Event ahead of time. Upon rendering, a page controller sets-up & shims-in its' own Change Event.

Oddly, this event gets called TWICE:

enter image description here

Q: What am I doing wrong?
Q: Is this HOW we should over-write the change event on an existing Kendo ComboBox?

MVC CONTROL:
As you can see, I am NOT defining any client-side events here...

@(Html.Kendo().ComboBox()
  .Name("ddlTechnician")
  .Filter("contains")
  .Placeholder("Select Technician...")
  .DataTextField("Text")
  .DataValueField("Value")
  .BindTo(new List<SelectListItem>() {
      new SelectListItem() { Text = "Frank", Value = "1" },
      new SelectListItem() { Text = "Suzie", Value = "2" },
      new SelectListItem() { Text = "Ralph", Value = "3" }
  })
  .Suggest(true)
  .HtmlAttributes(new { style = "width:300px;" }))

PAGE CONTROLLER:
And, I am only defining the event ONCE here. I have also confirmed the event isn't already firing BEFORE setting it in the Page Controller

$(document).ready(function () {

    var PageController = (function ($) {

        function PageController(options) {
            var that = this,
                empty = {},
                dictionary = {
                    elements: {
                        form: null
                    },
                    instances: {
                        ddlTechnician: null
                    },
                    selectors: {
                        form: 'form',
                        ddlTechnician: '#ddlTechnician'
                    }
                };

            var initialize = function (options) {
                that.settings = $.extend(empty, $.isPlainObject(options) ? options : empty);

                dictionary.elements.form = $(dictionary.selectors.form);

                // Objects
                dictionary.instances.ddlTechnician = $(dictionary.selectors.ddlTechnician, dictionary.elements.form).data('kendoComboBox');

                // Events
                dictionary.instances.ddlTechnician.setOptions({ change: that.on.change.kendoComboBox });
            };

            this.settings = null;
            this.on = {
                change: {
                    kendoComboBox: function (e) {

                        // This is getting called MULTIPLE TIMES
                        console.log('kendoComboBox RAN');
                    }
                }
                }
            };

            initialize(options);
        }

        return PageController;
    })(jQuery);

    var pageController = new PageController({});
});

Upvotes: 0

Views: 2192

Answers (1)

Oggy
Oggy

Reputation: 1666

I was able to reproduce your problem on a Kendo JQuery Combobox when I set the event handler through setOptions, which is not the recommended way after the widget has been rendered. Instead you should use the "bind" method as shown in the documentation's example for change events.

Try changing the line of code where you set your event handler to this:

dictionary.instances.ddlTechnician.bind("change", that.on.change.kendoComboBox);

Here's a dojo that shows the difference: http://dojo.telerik.com/iyEQe

Hope this helps.

Upvotes: 4

Related Questions