Post
Ask Question

Implement the Kendo Numeric Text box with MVVM Pattern

Decimal Format 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Untitled</title>  
  6.   
  7.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <div id="example">  
  18.   <input data-role="numerictextbox"  
  19.                    data-format="d" 
  20.                    data-bind="visible: isVisible,  
  21.                               enabled: isEnabled,  
  22.                    style="width: 180px"/>  
  23.                                        </div>  
  24.          <script>  
  25.     var viewModel = kendo.observable({  
  26.         selectedNumber: 0,  
  27.         isEnabled: true,  
  28.         isVisible: true,  
  29.         
  30.     });  
  31.     kendo.bind($("#example"), viewModel);  
  32. </script>  
  33.     
  34. </body>  
  35. </html>   
Currency Format  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Untitled</title>  
  6.   
  7.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <div id="example">  
  18.   <input data-role="numerictextbox"  
  19.                    data-format="c"  
  20.                    data-bind="visible: isVisible,  
  21.                               enabled: isEnabled,  
  22.                    style="width: 180px"/>  
  23.                                        </div>  
  24.          <script>  
  25.     var viewModel = kendo.observable({  
  26.         selectedNumber: 0,  
  27.         isEnabled: true,  
  28.         isVisible: true,  
  29.         
  30.     });  
  31.     kendo.bind($("#example"), viewModel);  
  32. </script>  
  33.     
  34. </body>  
  35. </html>