Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<link href="//da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="//da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="//da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="//da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="//da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="//da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//da7xgjtj801h2.cloudfront.net/2014.2.716/js/kendo.all.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="grid"></div>
</body>
</html>
 
var data = [
  { name: 'Fred', birthday: new Date('1/1/2000') },
  { name: 'Ed', birthday: new Date('12/1/2001') },
  { name: 'Red', birthday: new Date('2/1/2002') },
  { name: 'Ned', birthday: new Date('3/1/2003') },
  { name: 'Jed', birthday: new Date('4/1/2004') },
];
$("#grid").kendoGrid({
  dataSource: new kendo.data.DataSource({
    data: data,
    schema: {
      model: {
        fields: {
          name:{ type: 'string' },
          birthday: { type: 'date', validation: { max: new Date('12/1/2006') }}
        }
      }
    }
  }),
  toolbar: ["create"],
  columns: [
    { field:"name", title: "Name" },
    { field: "birthday", title: 'Birthday', format: "{0:yyyy-MM-dd}" },
    { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
  editable: "popup"
});
Output

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

Dismiss x
public
Bin info
giltnerj0pro
0viewers