This series would be introducing simple examples of the widget along with the problems and the solutions that were used during execution of a project.

Kendo UI is a set library extended from Jquery developed and managed by Telerik.com.

It has bin built upon jquery so this makes it easier for the developers to understand an code using Kendo UI if they are already familiar with Jquery.

Kendo UI has an extensive set of widget that we can use to develop UI for web and mobile. It has a rich library and has support for angularjs also as an added feature to bind your data in to the views.

Kendo UI is mobile friendly and responsive and therefore is a preferred commercial solution being used by many developers and companies.

Some of the widgets that Kendo UI Provides are listed below.

1. Kendo Grid
2. ListView
3. KendoWindows
4. DatePicker
5. AutoComplete

To start with our first example for KendoGrid.

We would need to include a few javascript files and css files in our code to be able to use kendo UI

http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css
http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css
http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js

These are the bare minimum set of files to be included for the kendo ui widgets

To create a grid we need a data source which uses a JSON Object to fill in the data in to the grid rows.

var employee = [ { firstName: "Naren", 
             lastName: "Arora", 
             email: "narendra.arora@evontech.com",
         designation: Assitant Architect   },
           { firstName: "Surit", 
             lastName: "Agarwal", 
             email: "surit.agarwal@evontech.com",
        designation: Software Developer },
           { firstName: "Sachin", 
             lastName: "Joshi", 
             email: "sachin.joshi@evontech.com",
         designation: SEO}];

The above example creates a JSON with employee details and now we would create a Grid using the same.

To create the grid element we would first need to create the HTML element for the grid.

<div id=EmployeeGrid></div>

The javscript code below would bind the HTML div element and create a Kendo Grid.

var dataGrid = $("#EmployeeGrid").kendoGrid({
    selectable: "row",
    dataSource: Employee,
    height: "100%",
    sortable: true,
    columns: [ { title: "First Name", field: "firstName" }, 
               { title: "Last Name", field: "lastName"},
               { title: "Email", field: "email" },
           { title: Designation,field: designation} ],
    pageable: true
}).data("kendoGrid");

To understand the config variables, events and functions of the kendo grid please look into their documention available at http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

We would look into some more examples and other widgets in the coming tutorials.