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 MVVM Bound Listview Sortable Demo" />
    <base href="http://demos.telerik.com/kendo-ui/web/listview/mvvm.html">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
​
</head>
<body>
    <div id="example" class="k-content">
    <div class="configuration-horizontal">
        <div class="config-section">
            <span class="configHead">Records</span>
            <div id="list" data-role="listview"
                 data-template="template"
                 data-bind="source: fruits"
                 style="width: 100%; overflow: auto"></div>
        </div>
​
    </div>
      <h2>Console</h2>
      <div id="results">Move an item in the list</div>
    <script type="text/x-kendo-tmpl" id="template">
        <div class="product-view k-widget">
            <dl>
​
                <dd>#:Name#</dd>
            </dl>
        </div>
    </script>
​
</div>
​
​
</body>
</html>
​
 
​
var viewModel = kendo.observable({
        fruits:[
          {"Name" : "Apple" },
          {"Name" : "Banana" },
          {"Name" : "Papya" },
          {"Name" : "Orange" },
          {"Name" : "Grapes" },
          {"Name" : "Dragon Fruit" }
        ]
        
    });
    kendo.bind($("#example"), viewModel);
​
$("#list").kendoSortable({
  change: function(e) {
    var fruit = viewModel.get("fruits");
​
    var oldIndex = e.oldIndex;
    var newIndex = e.newIndex;
​
    fruit.splice(newIndex, 0, fruit.splice(oldIndex, 1)[0]);
​
    //Set it back to the original list
    viewModel.set("fruits", fruit);
    
    //Dump the results
    $("#results").html(JSON.stringify(viewModel.get("fruits")));
  }
});
​
Output 300px

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

Dismiss x
public
Bin info
sitefinitystevepro
0viewers