This recipe demonstrates how to get the most out of Kendo Grids by tapping directly into the Kendo API.
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>
</head>
<body>
<h3 style="color:#4f90ea;">Exercise 16 - Advanced API Example</h3>
<p><a href="index.html">Home</a></p>
<button id="expandAll" href="#">Expand All</button><button id="collapseAll" href="#">Collapse All</button>
<script type="text/javascript">
$(document).ready(function() {
$('#collapseAll').hide(); // MAKE SURE ONLY ONE BUTTON SHOWS ON LOAD
var outerServiceURL = "http://gonautilus.com/kendogen/KENDO.cfc?method=getArtists";
var innerServiceURL = "http://gonautilus.com/kendogen/KENDO.cfc?method=getArt";
var myDataSource = new kendo.data.DataSource({
transport: {
read: {
url: outerServiceURL,
dataType: "JSONP"
}
}
});
$("#myGrid").kendoGrid({
dataSource: myDataSource,
sortable: true,
detailInit: detailInit,
columns: [{ field: "ARTISTID", title: "Artist ID"},
{ field: "FIRSTNAME", title: "First Name"},
{ field: "LASTNAME", title: "Last Name"},
{ field: "EMAIL", title: "Email"},
{ field: "PHONE", title: "Phone Number"}]
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: {
url: innerServiceURL,
dataType: "JSONP",
}
},
filter: { field: "ARTISTID", operator: "eq", value: e.data.ARTISTID }
},
scrollable: false,
sortable: false,
columns: [
{ field: "ARTID", title: "Art ID"},
{ field: "ARTNAME", title: "Art Name"},
{ field: "DESCRIPTION", title: "Description"},
{ field: "PRICE", title: "Price", template: '#= kendo.toString(PRICE,"c") #'},
{ field: "LARGEIMAGE", title: "Large Image"},
{ field: "MEDIAID", title: "Media ID"},
{ field: "ISSOLD", title: "Sold"}]
});
}
expandCollapseGrid('#myGrid');
});
function expandCollapseGrid(gridId) {
$("#expandAll").click(function (event) {
event.preventDefault();
var grid = $(gridId).data("kendoGrid");
grid.expandRow(grid.tbody.find("tr.k-master-row"));
$("#expandAll").hide();
$("#collapseAll").show();
});
$("#collapseAll").click(function (event) {
event.preventDefault();
var grid = $(gridId).data("kendoGrid");
grid.collapseRow(grid.tbody.find("tr.k-master-row"));
$("#expandAll").show();
$("#collapseAll").hide();
});
}
</script>
<div id="myGrid"></div>
</body>
</html>In this recipe, we build on exercise 11 by adding the expandAll and collapseAll buttons. This can be especially helpful with a larger set of data that users may want to see all at once. Adding the HTML buttons to expand and collapse was easy; what we did next was create a function called expandCollapseGrid to make them functional. We used several API methods here, including data, expandRow, and collapseRow. Lastly, we used jQuery syntax to get at all of the particular rows contained in the tbody section of the grid to identify the elements we wanted to execute the methods on. The expandCollapseGrid function is built in a way that you should be able to reuse it on any Kendo Grid that has some type of grouping.
There are hundreds of other examples of using API methods to control the Kendo Grid. The complete documentation can be found at http://docs.kendoui.com/api/web/grid. You can also filter your results in the textbox at the top of the page, which may not be apparent at first glance. Also, be sure to check out the documentation on the Kendo datasource, as that is just as much a part of the grid. Datasource documentation can be found at http://docs.kendoui.com/api/framework/datasource.