PersonData.js
var personData = [{
FirstName : "Jim",
LastName : "Kirk",
Rank : "Captain",
DOB: "03/22/2233",
PersonId : 1
}, {
FirstName : "Jim",
LastName : "Raynor",
Rank : "Captain",
DOB: "06/23/2470",
PersonId : 2
}, {
FirstName : "Jean-Luc",
LastName : "Picard",
Rank : "Captain",
DOB: "07/13/2305",
PersonId : 3
}, {
FirstName : "Sarah",
LastName : "Kerrigan",
Rank : "Ghost Recon",
DOB: "09/07/2471",
PersonId : 4
}, {
FirstName : "Steve",
LastName : "Rogers",
Rank : "Captain",
DOB: "07/04/1922",
PersonId : 5
}];
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI Grid How-to</title>
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.default.min.css">
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.web.min.js"></script>
<script src="js/personData.js"></script>
</head>
<body>
<h3 style="color:#4f90ea;">Exercise 15 - Working with User Events</h3>
<p><a href="index.html">Home</a></p>
<script type="text/javascript">
$(document).ready(function() {
var myDataSource = new kendo.data.DataSource({
data: personData,
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
Rank: { type: "string" },
DOB: { type: "date" },
PersonId: { type: "number" }
}
}
}
} );
$("#myGrid").kendoGrid({
dataSource: myDataSource,
change: showChange,
selectable: "multiple cell",
columns: [
{ field: "Name", title: "Full Name", width: "300px", template: '#=FirstName# #=LastName#' },
{ field: "DOB", title: "Date of Birth", width: "300px" },
{ field: "Rank", title: "Rank", width: "300px" }
]
});
});
function showChange(e) {
var selected = $.map(this.select(), function(item) {
return $(item).text();
});
alert("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
</script>
<div id="myGrid"></div>
</body>
</html>
No comments:
Post a Comment