How to make a dynamic input field as a numeric textbox in Kendo UI?

Question

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

Jayesh Goyani · Accepted Answer · 2015-09-08T07:36:51.007

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>

JSFiddle

Let me know if any concern.

I already tried your way. But it didn't work for me. Working fine. But not show a kendo numeric text box. — NoughT, Sep 08 '15 at 07:01
I have created full demo in JSFiddle and added its link in my above answer. Filed2 have kendo numeric textbox. — Jayesh Goyani, Sep 08 '15 at 07:37
Hey Bro.. I made with your help. It was a case in a adding a class to the input field. Thank you for help bro. And also for JSFiddle — NoughT, Sep 10 '15 at 12:28

How to make a dynamic input field as a numeric textbox in Kendo UI?

1 Answers1