Kendo UI Web – HelloWorld!

In this post, we will see how we can kick start using the Kendo UI for Web.

Create Project

We will be creating an ASP.NET empty application project to demonstrate the Kendo UI for web. As you see in the following image, an empty ASP.NET project “HelloKendo” is created.


You can see that, the project doesn’t contain any files other than the Web.config. At this point if you run the application, you would find any page to show.


To fix that, let’s add “index.html” to the project.


Let’s add the following html to display the page.


And we are good, displaying the index.html.


Download Kendo Web

You need to download the Kendo UI from here.

Extract the zip file and you will find the following folder structure. The js and styles folders are going to be used in this demonstration.


Let’s go into Styles folder and copy the displayed folder and css files.


In the project we will keep the copied styles under Styles folder. As you see in the following image, the Styles folder contains the copied files and folder.


Now from js folder, we need to copy the following javascript files. Note that, if you have a copy of jquery.min.js; you need not copy from the folder, you could use your specified jquery version file.


Now that, we have added the script and style files. Let’s link them to the page we are going to use. The following image shows that the scripts and styles are used in the head section of the html.


Now to demonstrate that, we have added Kendo UI to the page, let’s use a control DatePicker. To use the control, you need to create an input and using the kendoDatePicker() method we would initialize the control.


The following is the output when you click on the calendar button in the input.


Hope this post is useful.

Thanks for reading. Like Method Of Tried in Facebook.