As of now we have learned a lot about Kendo UI web widgets and now its time to learn some actual implementation, here I have chosen Grid as it is the most complex widget available. We will implement a full featured grid with some local data bounded to it by Kendo UI data source, it will also have sorting, filtering, paging and grouping. So we will start with an empty HTML page.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <TITLE>Implementing Kendo Grid</TITLE> <link href="content/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="content/kendo.default.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/kendo.web.min.js"></script> </head> <body> </body> </html>
The above code is the simple HTML5 page with all the references to the Kendo scripts and stylesheets, Kendo scripts and styles are placed in the scripts and contents directory of my web project. To start we have some HTML markup and a script which will initialize this markup as Kendo Grid.
<div id="colleges"></div>
Now we will create a script tag with document ready function, which will also define the local array of JavaScript objects to populate the Kendo Grid, we have created an array named colleges that contains JavaScript objects that contains colleges Establishment year, Location and Name.
<script type="text/javascript">
$(document).ready(function() {
var colleges = [
{year: 1996, location: "Mathura", name: "Hindustan College of Science and Technology"},
{year: 1998, location: "Agra", name: "Anand Engineering College"},
{year: 1999, location: "Agra", name: "Hindustan Institute of Technology and Management"},
{year: 2002, location: "Barabanki", name: "Sagar Institute of Technology and Management"},
{year: 2001, location: "Lucknow", name: "Saroj Institute of Technology and Management"},
{year: 1991, location: "Mathura", name: "GLA University"},
{year: 1921, location: "Kanpur", name: "Harcourt Butler Technological Institute"},
{year: 1984, location: "Lucknow", name: "Institute of Engineering and Technology"}
];
});
</script>
now we have defined our data so we need to create the Kendo UI data source to which my grid will be bound to:
var collegesDataSource = new kendo.data.DataSource({data: colleges});
collegesDataSource.read();
if you recall my previous post, you might recall the process of data binding by passing the JASON-formatted string in the kendo DataSource function. Now we have DataSource but we need to bind it to show up something, we will do this by using a jQuery selector to select my element colleges and assign the KendoGrid widget to it and assign the collegesDataSource to it:
$("#colleges").kendoGrid({
dataSource: collegesDataSource
});
So enough of code now lets see what it is the output.
Kendo Grid
You can see it pulls up a simple grid with mo much functions. First thing we will do is change the title of the column, by default the title is the name of the attribute defined in the data source that is why they are in lowercase, we can do that by re-configuring the columns:
$("#colleges").kendoGrid({
dataSource: collegesDataSource,
columns: [
{field: "year", title: "Establishment Year"},
{field: "location", title: "Location"},
{field: "name", title: "Name of College"}
]
})
Now you can see the change in the title of the columns:
Kendo Grid with custom title
Next thing I wanna do is insert paging which makes the grid look better, in order to introduce paging in Kendo Grid we need to do two things: first thing to do is turn off scrolling and turn on paging, we will do this with the help of scrollable and pageable property and lastly we need to configure the page size which is done in the data source:
var collegesDataSource = new kendo.data.DataSource({data: colleges, pageSize:3});
collegesDataSource.read();
$("#colleges").kendoGrid({
dataSource: collegesDataSource,
columns: [
{field: "year", title: "Establishment Year"},
{field: "location", title: "Location"},
{field: "name", title: "Name of College"}
],
scrollable: false,
pageable: true
})
Lets have a look to the output now :
Kendo Grid with Paging
Next we will add sorting, grouping and filtering feature to our grid, which can simply be done by setting the sortable, groupable and filterable property to true.
$("#colleges").kendoGrid({
dataSource: collegesDataSource,
columns: [
{field: "year", title: "Establishment Year"},
{field: "location", title: "Location"},
{field: "name", title: "Name of College"}
],
scrollable: false,
pageable: true,
sortable: true,
groupable: true,
filterable: true
})
You can also introduce default sorting, the default sort order is added in the data source, we set the sort field and the direction to which it is to be sorted, in this case it is ‘year’ and ‘ascending’:
var collegesDataSource = new kendo.data.DataSource({data: colleges, pageSize:3,
sort:{field: "year", dir: "asc"}});
We can also add editing feature to our grid, for doing this we will first setup the editable property, for this we have various options – ‘inline’ , ‘popup’ and next we need to add command column:
$("#colleges").kendoGrid({
dataSource: collegesDataSource,
columns: [
{field: "year", title: "Establishment Year"},
{field: "location", title: "Location"},
{field: "name", title: "Name of College"},
{command: ["edit", "destroy"]}
],
scrollable: false,
pageable: true,
sortable: true,
groupable: true,
filterable: true,
editable: "inline"
})
Thats it, we created a fully functional Grid with various features.
Full Featured Kendo Grid
Download the source code of ImplementingKendoGrid and see it in action.