See what Kendo UI Grids can do (Simple)
This recipe demonstrates how to transform a simple table into a Kendo Grid.
You will need to download the Kendo Web framework. You also have the option of downloading the exercise files that accompany this book, which can help you get started or check your work as you follow along. You can download the commercial or open source version of Kendo Web at http://www.kendoui.com/download.aspx. You'll want to extract the minified versions of the files referenced below to their respective folders. Also, make sure to copy at least the folders named Default and Metro from the styles folder in the Kendo download. Put your Kendo js and styles folders in another folder on the root named kendo.
If you've downloaded the exercise files, open 1-initializing.html in your editor. If you do not have access to the exercise files, copy the following code into your preferred text editor or IDE. I prefer to use Sublime Text 2 (http://www.sublimetext.com/) as my text editor, which is free to try.
<!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 1 - See What Kendo UI Grids Can Do</h3>
<p><a href="EB9781849699136_3.html">Home</a></p>
<script type="text/javascript">
$(document).ready(function(){
$("#myGrid").kendoGrid();
});
</script>
<table id="myGrid">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Rank</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jim</td>
<td>Kirk</td>
<td>Captain</td>
</tr>
<tr>
<td>Jim</td>
<td>Raynor</td>
<td>Captain</td>
</tr>
<tr>
<td>Sarah</td>
<td>Kerrigan</td>
<td>Ghost Recon</td>
</tr>
</tbody>
</table>
</body>
</html>
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
A Kendo Grid is basically a table or structured set of data that is transformed by the Kendo JavaScript engine. Kendo stylesheets will help make the Kendo Grid look pretty, but it is the jQuery-based JavaScript engine that does the magic. Kendo also utilizes HTML5 as part of its framework, which we will demonstrate later.
The real key to making this example work is telling Kendo what div or table is to be used to make a Kendo Grid. You tell Kendo by using the jQuery syntax, usually by matching the ID or class of the table, followed by calling the kendoGrid() function as shown in the following line of code:
$("#myGrid").kendoGrid();
The reader should already be familiar with CSS and HTML, but if you want more information about jQuery or JavaScript, there are a plethora of resources available. There are also a number of fine books available from Packt Publishing (http://www.packtpub.com) that will serve as an invaluable resource for you in your design/development career. I also recommend the W3 Schools website (http://www.w3schools.com) and the jQuery website (http://jquery.com) itself as a good starting point.
If you choose to follow along by typing out the code yourself instead of using the exercise files and copying and pasting, be sure to reference your jquery.js file before your kendo.web.min.js file. The Kendo library is dependent on jQuery, so jQuery must be loaded first.
The open source and commercial versions of Kendo Web will also contain the full source code, located in the folder named src. You'll want to use the minified versions for production, but you may want to use the full version for development. Minified versions of CSS or JavaScript are compacted to save space and will not provide helpful information if you have an error or want to make your own customizations.
While many applications may qualify to legally use the open source version of Kendo Web under GPLv3, you are strongly encouraged to have any application reviewed by your own legal authority. To be safe, you can always purchase the commercial version of Kendo Web, which has the added benefit of providing support and regular updates to the framework.