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="events: {click: add}" value="Add Name" id="b-add" />
  <input type="button" data-bind="events: {click: upd}" value="update" id="b-update" style="display:none;"/>
  <input type="button" data-bind="events: {click: del}" 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="events: {click: edit}, text: CustomerName"></a>
  </div>       
  </script>
  
  <script>
   var model = kendo.observable({
      Names: [{ CustomerName: "Tom"}, {CustomerName: "Mary"}, {CustomerName: "Jim"}],
      Name: null,
      currentItem: null,
      add: function(e) {
        this.get("Names").push({CustomerName: this.get("Name")});
        this.set("Name", null);        
      },
      edit: function(e) {
        this.currentItem = e.data;
        this.set("Name", e.data.CustomerName);   
        $("#b-add").hide();
        $("#b-update").show();
        $("#b-delete").show();
      },
      upd: function(e) {    
        this.currentItem.set("CustomerName", this.get("Name"));
      },
      del: function(e) {
        var names = this.get("Names");
        for(var i = 0; i <= names.length; i++){
            if(names[i].CustomerName == e.data.Name){
                names.splice(i, 1);
                break;
            }
        }
        this.set("Names", names);
      }
    });
    
    kendo.bind($("body"), model);
  </script>
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers