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

Binding events after initialization to multiple controls not working.

5 Answers 305 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Satish
Top achievements
Rank 1
Satish asked on 09 May 2012, 11:23 PM
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/ 

5 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 10 May 2012, 08:21 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Satish
Top achievements
Rank 1
answered on 10 May 2012, 09:26 PM
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.
0
Accepted
Atanas Korchev
Telerik team
answered on 11 May 2012, 07:23 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shawn
Top achievements
Rank 2
answered on 29 Oct 2018, 06:06 PM
Please advise how to use the .each() method to bind the change event of multiple numeric text boxes on a page?
0
Boyan Dimitrov
Telerik team
answered on 01 Nov 2018, 01:27 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Satish
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Satish
Top achievements
Rank 1
Shawn
Top achievements
Rank 2
Boyan Dimitrov
Telerik team
Share this question
or