Persisting the default value of the numeric text after deleting entered value - kendo-ui

Question

Have a look at the sample here.
The problem I have is that I need to have 0.00 value remain in the numerictextbox even though the value is deleted in the control. At the moment it appears as empty on the UI. Can anyone advise the cleanest solutions for problem?

Answer 1

You can achieve your goal wiring the change event of the widget and modify its value and the model's one when it is triggered.
<div id="view">
<div data-template="containertpl" data-bind="source: People"></div>
<button data-bind="click: AddNew">Add</button>
</div>
<script id="containertpl" type="text/x-kendo-template">
<div>
<label for="FirstName#:id#">Name</label>
<input name="FirstName#:id#" type="text" data-bind="value: FirstName"/>
<input data-role="numerictextbox" data-bind="value: Income, events: { change: numericChange }"/>
</div>
</script>
var viewModel = kendo.observable({
People: [
{id: 1, FirstName: "", Income: "0.00" },
{id: 2, FirstName: "", Income: "0.00" },
{id: 3, FirstName: "", Income: "0.00" }
],
numericChange: function(args) {
var numeric = args.sender;
if (numeric.value() === null) {
numeric.value(0);
args.data.set("Income", 0);
}
}
});
viewModel.AddNew = function(){
viewModel.People.push({id: viewModel.People.length + 1, FirstName: "Generated", Income: "0.00"});
};
$(document).ready(function(){
kendo.bind($("#view"), viewModel);
});