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 lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet">
  <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet">
</head>
<body>
  
  <div id="grid"></div>
  
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
  <script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
​
  <script>
​
    (function ($) {
      
      $.mockjax({
        url: "things",
        responseText: [ { field1: "Thing 1", field2: 1, field3: 2 }, { field1: "Thing 2", field2: 3, field3: 4 }]
      });
      
      $("#grid").kendoGrid({
        dataSource: {
          transport: {
            read: "things"
          },
          schema: {
            parse: function (data) {
              // return a new collection which has an new field
              // that adds fields 2 and 3 together
              return $.map(data, function(item) {
                item.field4 = item.field2 + item.field3;
                return item;
              });
            }
          }
        },
        columns: [{ field: "field1", title: "Name" },
                  { field: "field2", title: "Field 2" },
                  { field: "field3", title: "Field 3" },
                  { field: "field4", title: "Sum Of 2 And 3" }]
      });
      
    }(jQuery));
​
  </script>
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers