Hello there
Maybe this is a known problem, I couldn't find this case in the Internet / forum here. I want to bind a MaskedTextBox Widget to a HTML element:
<input id="numbertest" value="555" class="numericBox" />
The id element "numbertest" is not available after loading the page. Thats why I added a class to the id element so it will be affected as soon as it is created. The id element is part of a Kendo UI template. In the ready function I added therefore:
$(".numericBox").kendoMaskedTextBox({
mask: "000"
});
And of course I need a valid class in the header:
.numericBox {
font-size: 20px;
}
Now the weird behaviour: The font size inside the element numbertest is set to 20 when the template is created but its not a MaskedTextBox (I can enter anything). To be sure its not only a MaskedTextBox problem I also tried to attach a NumericTextBox but that also wont work. Thats why I think its a general problem. I can only make it work when creating the numbertest element before the ready function is called. Then I'm able to bind the element numbertest to a MaskedTextBox by classname (and of course directly by accessing it by $("#numericBox"). ...
So my question: Is there a way to attach a Widget to a html element even if its not created after page is loaded (but later on by f.e. a Kendo UI template)?
Regards
4 Answers, 1 is accepted
the approach you have taken won't work in general - you may try calling other jQuery methods over the same selector (like css) to verify that - it won't have any effect on elements that are not present in the DOM.
You should instantiate the widget after the template contents have been inserted and available in the DOM. You haven't specified more details about your project, but I assume that there is an event (ajax success for example?) which you can utilize for that.
Regards,
Petyo
Telerik
Rank 1
Iron
Thank your for your answer and sorry for not being more precise. I thought its obvious enough. To be honest, I don't know why it works (probably JQuery is handling that what I am using) but I already use this mechanism inside Kendo UI templates (that are not present after initializing the page (and not yet available in DOM). When such a template is created the elements inside do take care of visual CSS styles and events set on certain CSS classes. So it works!
In the current case I wanted to implement a MaskedTextBox or NumericTextBox inside a InfoWindow of Google Maps ( https://developers.google.com/maps/documentation/javascript/infowindows ). Since these InfowWindows are created dynamically at the time when the Google Maps window will be opened, I don't see any possibilty to created it before. I don't know what other Widgets you want me to test this case? I know what I "should" but sometimes a project forces some other solutions (that are obviously available). I need to have a MaskedTextBox or a NumericTextBox in this situation. Why should then any other Widget work if those two don't work?
However, I found a solution to mask the input element in the infowindow: https://igorescobar.github.io/jQuery-Mask-Plugin/
I don't like choosing this plugin but it works smooth, even or especially over referenced CSS classes. "Don't like" because I try to keep my project slim and don't want to blow up with plugins that Kendo UI can't handle.
Regards
Like I already outlined in my previous post, CSS rules and jQuery based event handling (via delegation) do not need an element to be present in the DOM by the time the code is invoked. However, element manipulation methods (including plugins that need the element, like all kendo widgets) won't work. I pointed you to one of the jQuery methods you can use to verify that - did you test it?
Regards,
Petyo
Telerik
Rank 1
Iron
Ok, got it now: The element needs to be present in DOM when binding it to a Kendo UI widget. I can live with that with the mentioned masked JS plugin.
Thanks