Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.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.2.716/js/kendo.all.min.js"></script>
<title>JS Bin</title>
</head>
<body>
  <div id='grid'></div>
</body>
</html>
 
var persons = [
  { name: 'Fred', age: 11 },
  { name: 'Ed', age: 21 },
  { name: 'Red', age: 31 },
  { name: 'Ned', age: 41 }
  ];
$(function() {
  $.each(persons, function(i, p) {
    // localStorage.setItem(KEYNAME, VALUE)  Using the name of each person as the Key
    localStorage.setItem(p.name, JSON.stringify(p));
  });
  
  $("#grid").kendoGrid({
    dataSource: {
      data: getPeople(),
      schema: {
        model: {
          fields: {
            name: { type: "string" },
            age: { type: "number" }
          }
        }
      }
    },
    columns: [
      { field: "name" },
      { field: "age" }
      ]
  });
});
var getPeople = function() {
  var people = [];
  for(var i=0; i< localStorage.length; i++) {
    var key = localStorage.key(i);
    people.push(JSON.parse(localStorage[key]));
  }
  return people;
};
Output

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

Dismiss x
public
Bin info
giltnerj0pro
0viewers