This recipe demonstrates how to work with user events in the grid.
Copy the following code into your new document:
<!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="EB9781849699136_3.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>
In this recipe, we define the change parameter in our grid and pass it the showChange function that we created. All the showChange function does is push an alert to the browser telling the user how many cells they have selected and what data those cells hold. There are many uses for this type of functionality. You could use it to just log what selections a user has made or you could create a pop up of an image related to the data in that row.
You may also have noticed that we added a parameter called selectable and passed it the value of multiple cell. This just makes this recipe more practical when a user clicks on individual and multiple cells.