DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Introduction to Kendo UI

Introduction to Kendo UI

Dhananjay Kumar user avatar by
Dhananjay Kumar
·
Feb. 20, 12 · Web Dev Zone · Interview
Like (1)
Save
Tweet
17.90K Views

Join the DZone community and get the full member experience.

Join For Free

kendo ui is html 5 and jquery based framework and it helps you to create modern web applications. kendo ui helps you

  • in data binding
  • in animations
  • with ui widgets like grid and chart
  • with drag and drop api
  • in touch support.

download kendo ui from here

once you download you get these folders:

image

navigate to the 'example' folder for examples of various widgets.

if you want to start developing web applications using kendoui then you need to add the required file in your project.

you need to add the below files in the script folder:

image

and you need to add the below files in the style folder:

image

even though i have added script files and css files in the script folder and style folders respectively, you are free to keep them anywhere you want. after adding these files you need to link them in the header of the html page. you can add the reference as below:

image

in a later post i will go into the details of kendo ui and play around with all other aspects. however, working with any widgets is very intuitive. for example, if you want to work with kendo autocomplete , you can do that as below:

image

and using jquery you can assign the value as below:

image

putting all html and script code together:

test.htm

<html >
<head>
<!--in the header of your page, paste the following for kendo ui web styles-->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<!--then paste the following for kendo ui web scripts-->
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/kendo.all.min.js" type="text/javascript"></script>
<script src="scripts/test.js" type="text/javascript"></script>
<title>my kendo ui demo</title>
</head>
<body>
<h1>kendo ui demo</h1>
<input id="cricketerautocomplete" />
</body>
<script type="text/javascript">
$("#cricketerautocomplete").kendoautocomplete(
["sachin",
"dhoni",
"saurabh",
"rahul"]);
</script>
</html>

when you run test.htm in your browser, you should get this output:

image

in later posts i will get into detail about all widgets. i hope this post is useful. thanks for reading.

source: http://debugmode.net/2012/02/18/introduction-to-telerik-kedno-ui/

Data binding application POST (HTTP) JQuery Download Drops (app)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • 8 Must-Have Project Reports You Can Use Today
  • When Writing Code Isn't Enough: Citizen Development and the Developer Experience
  • Event-Driven Microservices?
  • Vaadin Apps as Native Executables Using Quarkus Native

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo