Knockout-Support.md

layout	title	description	platform	control	documentation	api
post	Knockout-Support	knockout support	js	NumericTextbox	ug	/api/js/

Knockout Support

Knockout support allows you to bind the HTML elements against any of the available data models. It is of two types**.**

• One-way binding
• Two-way binding

One-way binding refers to the process of applying observable values to all the available properties of the NumericTextBox widget, but the changes made in NumericTextBox widget are not reflected and triggered in turn to the observable collection. This kind of binding applies to all the properties of the NumericTextBox widget.

Two-way binding supports both the processes; it applies the observable values to the NumericTextBox widget properties as well as the changes made in the NumericTextBox widget are also reflected back and triggered within the observable collections.

For more information about the knockout binding, refer the following online documentation in the given link location,

https://help.syncfusion.com/js/knockoutjs

The following example depicts the way to bind data to the NumericTextBox widgets through knockout support that enables and populates data to the NumericTextBox widget based on the value set to the other NumericTextBox widget.

{% highlight html %}

<title></title> <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/knockout.min.js"></script> <script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/ej.web.all.min.js"> </script> <script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/ej.widget.ko.min.js"></script>

Numeric

<script type="text/javascript"> window.viewModel = { numericValue: ko.observable(100) } jQuery(function ($) { ko.applyBindings(viewModel); }); </script> <style> .input { height: 27px; text-indent: 10px; width: 81%; } </style>

{% endhighlight %}

The output of Knockout binding in NumericTextBox .

NumericTextBox at initial load {:.caption}

NumericTextBox with KnockoutJS binding {:.caption}