KendoUI Template with Observable with NumericTextbox

Question

I have the following KendoUI template bound to an observable. When I push a new item to the observable array, how do I apply the kendoNumericTextBox to only the new item in the template?

If I apply by class, it has a strange effect of doubling the spinners on the existing numeric textboxes.

<div id="slots">
        <table class="table table-striped table-condensed" style="width:auto;">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Volunteers Needed</th>
                    <th>
                        Reservation Passcode <i class="icon-question-sign" title ="Only people with the reservation passcode can signup."></i>
                    </th>
                </tr>
            </thead>
            <tbody data-template="row-template" data-bind="source: slots">
            </tbody>
        </table>

    </div>



 $(document).ready(function () {
          var viewModel = kendo.observable({
                slots: [{DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" }]
              });
          kendo.bind($("#slots"), viewModel);
          $(".numeric").kendoNumericTextBox({
              format: "n0"
          });

          viewModel.slots.push({DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" });

          $(".numeric").kendoNumericTextBox({
              format: "n0"
          });  
 });

Thanks for any help!

Answer 1

Try defining your template as:

<script type="text/x-kendo-tmpl" id="row-template">
    <tr>
        <td>#= DateText #</td>
        <td>#= ShiftLabel #</td>
        <td class="numeric"><input data-role="numerictextbox" data-format="n0" data-bind="value: Slots"></td>
        <td>#= ReservationCode #</td>
    </tr>
</script>

and remove the $(".numeric").kendoNumericTextBox(...) initializations. Doing this you should have a NumericTextBox each time the template is run (one per row).

Your JavaScript is like this:

$(document).ready(function () {
    var viewModel = kendo.observable({
        slots: [
            {DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 2, ReservationCode: "ABC" }
        ]
    });
    kendo.bind($("#slots"), viewModel);

    viewModel.slots.push({DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 3, ReservationCode: "ABC" });
});

See it running here http://jsfiddle.net/OnaBai/BV48W/

Why: The fact that you use a CSS class (.numeric) causes you end up having a KendoUI Numeric Text Box inside the other.

Example: You have the following HTML:

<label>Number 1: <input id="number1" class="numeric"/></label>
<label>Number 2: <input id="number2" class="numeric"/></label>

And the JavaScript

$(document).ready(function () {
    $(".numeric").kendoNumericTextBox({
        format: "n0"
    });
    $(".numeric").kendoNumericTextBox({
        format: "n0"
    });
});

You will see what you called strange effect of doubling the spinners on the existing numeric textboxes.

Each time that you invoke kendoNumericTextBox using .numeric selector you add one extra spinner to the element. If it does not have a spinner (data just added to viewModel) it gets one but if then you add data and invoke kendoNumericTextBox using .numeric selector, that previous element gets another.