This recipe demonstrates the built-in grouping feature of Kendo Grids.
Open 4-grouping.html and personData.js in your editor. If you don't have the exercise files, create a blank document for each and follow the set of instructions in the following section.
First, create a new JavaScript file in a new folder named
js. Then, copy the following code into the JavaScript file and save it: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 }];After creating your JavaScript file, copy the following code into your new HTML file:
<!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 4 - Using Built-in Grouping</h3> <p><a href="index.html">Home</a></p> <script type="text/javascript"> $(document).ready(function() { var myDataSource = new kendo.data.DataSource({ data: personData, group: { field: "Rank" }, schema: { model: { fields: { FirstName: { type: "string" }, LastName: { type: "string" }, Rank: { type: "string" }, PersonId: { type: "number" } } } } } ); $("#myGrid").kendoGrid({ dataSource: myDataSource, groupable: true // allows the user to alter what field the grid is grouped by }); }); </script> <div id="myGrid"></div> </body> </html>
You've probably noticed that we are no longer using the actual HTML table as our datasource. We are actually defining our datasource by manually building a JavaScript array with the relevant columns and data we had in the table that was used previously. In this example, we are defining kendo.data.DataSource, which expects its own structure of data in order to accurately populate the grid. More information about things you can further refine in the Kendo datasource can be found in the Kendo documentation. We will cover several of them in this book.
We also replaced our HTML table with a simple <div> tag with an ID equal to myGrid. Next, we separated defining our Kendo datasource from defining our Kendo Grid. This is a best practice that will be followed throughout the rest of the book.