Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
-<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Kendo Basic Array Binding" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
​
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<title>Kendo UI JsBin</title>
</head>
<body>
  <input type="text" id="t-name" data-bind="value: Name"/>
  <input type="button" data-bind="click: Add" value="Add Name" id="b-add" />
  <input type="button" data-bind="click: Update" value="Update" id="b-update" style="display:none;"/>
  <input type="button" data-bind="click: Delete" value="Delete" id="b-delete" style="display:none;"/>
  <br>
  <div data-template="amazing-template" data-bind="source: Names"></div>
​
  
  <script id="amazing-template" type="text/x-kendo-template">
  <div>
    <a href="javascript:" data-bind="click: Edit">#: CustomerName#</a>
  </div>
    
  </script>
  
  <script>
    var model = kendo.observable({
      Names: [{ CustomerName: "Tom"}, {CustomerName: "Mary"}, {CustomerName: "Jim"}],
      Name: null,
      Add: function(e) {
        this.get("Names").push({CustomerName: this.get("Name")});
        this.set("Name", null);
        
      },
      Edit: function(e) {
        
        this.set("Name", e.data.CustomerName);
        $("#b-add").hide();
        $("#b-update").show();
        $("#b-delete").show();
      },
      Update: function(e) {
        alert("How do I update the current array item?");
      },
      Delete: function(e) {
        alert("How do I delete the current array item?");
      }
    });
    
    kendo.bind($(document.body), model);
  </script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mel1daapro
0viewers