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>
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
​
<div id="orders-list" data-role="listview" data-bind="source: orders" data-template="order-template"></div>
​
<script id="order-template" type="text/x-kendo-template">
  <div>Country: <span>#: ShipCountry #</span>
  - 
  City: <span>#: ShipCity #</span></div>
  <div style="font-weight:bold;">
    Calculated:
    <div>#: CalculatedField() #</div>
  </div>
  <br />
</script>
  
</body>
</html>
​
 
var ordersDataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/Northwind.svc/Orders",
            type: "GET",
            dataType: "jsonp",
            contentType: "application/json"
        }
    },
    schema: {
        type: "json",
        data: function(response) {
            return response.d.results;
        },
        model: {
            CalculatedField: function() {
                return this.get("ShipCountry") + " " + this.get("ShipCity");
            }
        }
    },
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
    pageSize: 3
});
​
var viewModel = kendo.observable({
    orders: ordersDataSource
});
​
kendo.bind($(document.body), viewModel);
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers