Here is my situation.
I am making a dynamic form with a help of this article.
Here you can see it (article demo) use kendo template .
<script id="fieldsTemplate" type="text/x-kendo-template">
<li>
<label data-bind="attr: { for: name}, text: label"></label>
<input data-bind="attr: { type: type, name: name, class: css}" # if (get("required")) {# required #} # />
</li>
</script>
After form generated this form is just use HTML5 make the form. It does't have kendo attribute. for a example if I bound data-role attribute and value is numerictextbox It doesn't give me a numeric text box(Think its' type is number). It doesn't have those properties.( if I type a number it doesn't show the default decimal point. It only shows that number.)
But in this example says if we add data-role attribute and value as numerictextbox it will be a numeric text box.
But in documentation or in this , it seems I have to call kendoNumericTextBox method to make a numeric text box.
Even I try to add this code to template but it doesn't work(Please assume that I add this correctly with this ).
$("#mytextboxid").kendoNumericTextBox();
So what option do I left ?? Thank you very much
You have to set data-role attribute into input element to convert the element into kendo control/element. Please try with the below code snippet.
<body>
<div id="example">
<!-- container UL to host input fields -->
<ul data-template="fieldsTemplate" data-bind="source: fields"></ul>
</div>
<!-- Kendo Template binds properties from model to input fields -->
<script id="fieldsTemplate" type="text/x-kendo-template">
<li>
<label data-bind="attr: { for: name}, text: label"></label>
<input name=#= name # class=#= css # # if (get("required")) {# required #} #
# if (type == 'number') {# data-role="numerictextbox" #}else{# type=#=type# #}# />
</li>
</script>
<script type="text/javascript">
// retrieve the model from an API call
var model = {
"fields": [{
"css": "cssClass1",
"label": "Field 1",
"name": "Field1",
"required": false,
"type": "text"
},
{
"css": "cssClass2",
"label": "Field 2",
"name": "Field2",
"required": true,
"type": "number"
},
{
"css": "cssClass2",
"label": "Checkbox Field",
"name": "CheckField",
"required": false,
"type": "checkbox"
},
{
"css": "cssClass2",
"label": "Email Address",
"name": "Email",
"required": true,
"type": "email"
},
{
"css": "cssClass2",
"label": "Password",
"name": "Password",
"required": true,
"type": "password"
}
]
};
// convert the JSON to observable object
var viewModel = kendo.observable(model);
// bind the model to the container
kendo.bind($("#example"), viewModel);
</script>
</body>
Let me know if any concern.