Binding events after initialization to multiple controls not working.

[Satish]

I'm trying to set and event handler to the change event to a collection of numeric controls after initialization. I have a multiple jQuery selector but the event seems to be binding only to the first control in the collection. It would be ideal if it behaved like jQuery event binding and bound to all controls in the collection. See the code sample http://jsfiddle.net/sitty/MeEhQ/4/ 

[Atanas Korchev]

Hi,

 You are binding the change event of only one numeric textbox:

$("#num1").data("kendoNumericTextBox").bind("change", function(e){
        total();
    }); 

You need to bind to the change events of the other as well:

$("#num2").data("kendoNumericTextBox").bind("change", function(e){
        total();
}); 

$("#num3").data("kendoNumericTextBox").bind("change", function(e){
        total();
}); 

Or pass the change handler during initialization:

$("#num1, #num2, #num3").kendoNumericTextBox({
        format: "c2",
        change: total
    }); 

Here is the updated jsfiddle: http://jsfiddle.net/korchev/MeEhQ/5/ 

Regards,
Atanas Korchev
the Telerik team

[Satish]

Sorry my bad the jsFiddle sample was wrong. Here is the updated sample http://jsfiddle.net/sitty/MeEhQ/7/.
Unfortunately I cannot bind the event at initialization I need to do it after. So I was doing as below
    $("#num1, #num2, #num3").data("kendoNumericTextBox").bind("change", total); 
This binds the event to only one control. I did find a workaround using  $("#num1, #num2, #num3").each()
I was wondering if there was a better way like above.

[Atanas Korchev]

Hello,

 $("#num1, #num2, #num3").data("kendoNumericTextBox") will return the first numeric textbox only (this is how the data method works). Using each or the methods I mentioned in my previous reply is the way to implement this requirement. 

All the best,
Atanas Korchev
the Telerik team

[Shawn]

Please advise how to use the .each() method to bind the change event of multiple numeric text boxes on a page?

[Boyan Dimitrov]

Hello,

Please use the following approach to bind to the change event of all Kendo UI MaskedTextBoxes on the page: 

$("[data-role='maskedtextbox']").each(function() {
        $(this).data().kendoMaskedTextBox.bind("change", function() {
            //goes the event handler
        })
})

 

Regards,
Boyan Dimitrov
Progress Telerik