Kendo UI Web

Kendo UI Logo

Resources for Webinar “Developing ASP.NET MVC Applications Quicker with Kendo UI”

Posted by

1

On Jul 11 we conducted a webinar titled “Developing ASP.NET MVC Application Quicker with kendo UI”. This is part of the ongoing webinar series we here at Telerik India are doing targeting the APAC region. We call this the Telerik .NET Ninja Developer Webinar series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/

image

Kendo UI is a HTML5 based JavaScript framework for developing HTML5 based sites or apps. Its everything you need to develop the sites and apps. Its one package which will give you pretty much everything you need to develop a HTML5 based apps or sites. Although it is a client side framework and that means a lot of JavaScripting, we have you covered if you want to develop on the server side. We have what we call as ASP.NET MVC Wrappers for Kendo UI. This give you the power of JavaScript but the productivity of server side. So this webinar was all about how you can build UI quicker in ASP.NET MVC using Kendo UI.

Slide Deck:

Here is the slide deck which I used for the webinar:

Webinar Video:

For those of you who missed attending the webinar live, we have it covered for you. We record all our webinars and so was this one. Here is the recording of the webinar:

Questions & Answers:

During the webinar, my team tried hard to answer as many questions as we can. With the interest of the time we normally collect all your questions and try to answer them through this recap blog post. So here is all the questions and answers for them:

Q: What is the license cost or purchase cost for Kendo ?
A: kendo UI costing is available at this page: http://www.kendoui.com/purchase.aspx

Q: Can we use Kendo UI for asp .net apps without MVC?
A: Yes you can. But note that Kendo UI is all about client side. So no server side programming of Kendo UI controls. You will need to use JavaScript way of working with Kendo UI in technology other than ASP.NET MVC. The server side wrappers are available only for ASP.NET MVC.

Q: Is Kendo UI available as part of Telerik Controls ?
A: You can buy Kendo UI as a single product. Here is the Kendo UI pricing – http://www.kendoui.com/purchase.aspx.  Also, if you buy any of our DevCraft bundles, kendo UI is included in the bundle. Here is our DevCraft bundle pricing – http://www.telerik.com/purchase.aspx

Q: Any live application developed using kendo UI?
A: You can take a look at www.kendouimusicstore.com. This is a famous reference app for ASP.NET MVC which was developed by Microsoft. We took the same and converted it to a Kendo UI application with front end being completely done using Kendo UI controls and back end powered by Web API.

Q: Before starting development, which language knowledge required?
A: If you know JavaScript, then you know Kendo UI. Kendo UI is built on JQuery. So nothing new to learn. If you want to program Kendo UI using a server side technology – we support Server Side Wrappers for ASP.NET MVC, JSP and PHP.

Q: Can we use kendo UI with Web API?
A: Yes absolutely. Kendo UI has Data Source that easily connects with Web API.

Q: To develop app in Kendo UI little bit JS is enough?
A: Yes, you do require JS knowledge especially awareness of jquery kind of syntax. But you can directly use ASP.NET MVC, PHP or JSP server side technologies too.

Q: How do we decide between jQuery UI and Kendo UI? Do we have comparison charts between these products?
A: Take a look at this article – http://jqueryuivskendoui.com/

Q: Will Kendo UI Support SharePoint 2010?
A: Kendo UI is a client side control set. As long as you develop a webpart which supports accessing external JavaScript and Stylesheet, Kendo UI can be used anywhere.

Q: Can we use knockout.js in Kendo UI or it’s not required because it’s different JavaScript library similar to knockout.js
A: Kendo UI has all the capabilities that you require (even of KO). But you can also use KO with Kendo UI.

Q: What kindsof data sources are supported?
A: Out of the box Kendo UI Data Source can handle JSON and XML.

Q: Does it support multiple cultures?
A: Globalization is one of the features in built in Kendo UI. So you can include the appropriate culture Kendo UI JS file and set the culture you want to work with. Rest will be handled by Kendo UI.

Q: Is Kendo UI a jquery plugin?
A: Kendo UI is not a Jquery plugin or a clone. Kendo UI is written from ground up but is based on Jquery. Jquery is the only dependency Kendo UI has. All the constructs in Kendo UI are similar to Jquery so that the learning curve is less.

Q: What are the key features of Kendo UI Mobile?
A: You can take a look at our Kendo UI Mobile product page – http://www.kendoui.com/mobile.aspx

Q: Is there any Kendo Controls for Winforms?
A: No. Kendo UI is for Desktop Browser based application and Cross Platform Hybrid Mobile Application development. for WinForms we have a separate control suite which you can take a look at here – http://www.telerik.com/products/winforms.aspx

Q: Can we have Scheduler control in Kendo UI?
A: Yes. Scheduler control is available as part of Q2 2013 release of Kendo UI.

Q: Can we use Kendo UI to show data in modal and provide CRUD operations with validations in Kendo UI
A: Kendo UI Grid already supports this feature. Take a look at our Grid demos online at – http://demos.kendoui.com/web/grid/index.html

Q: Kendo UI is only a Java Script library or any server side components are also involved?
A: Kendo UI is a client side HTML5 based JavaScript framework. We have server side wrappers to speed up your Kendo UI programming. The wrappers just output the necessary JavaScript code which otherwise you would have to write.

Q: Can we bind data from SQL DB?
A: You need to create Web Service or Web API which can return the data as JSON. Kendo UI has a JavaScript data source which can work out of the box with a service returning JSON payload or xml payload.

Q: Does that mean apps developed using Kendo UI can be used on mobile browser?
A: Yes. Kendo UI Web controls are touch aware and can run on all modern browsers.

Q: How do we compile to native app after completing the app in Kendo UI mobile?
A: If you are using our Cloud Based IDE – ICENIUM, it lets you build for iOS and Android platform right from the IDE. Otherwise you will need to use PhoneGap build mechanism to generate the package.

Q: How Kendo UI is different when compared with Knockout.Js ?
A: As far as I know, Knockout.js is a library to achieve data binding where as Kendo UI is a complete framework which provide Widgets/MVVM/Validation etc.

Q: Is there any project template for VS2012 from kendo UI?
A: Yes. When you install Kendo UI using our installers, we ship in a Visual Studio project template to speed up your ASP.NET MVC development with Kendo UI.

Q: Can we integrate WPF app in this Kendo UI?
A: WPF is a different technology set. Kendo UI is meant for Web applications & not WPF.

Q: What are the mandatory script files need to be included in kendo UI on working in MVC 4?
A: You need to include Kendo UI Web JavaScript and Kendo Stylesheet files into your project.

Q: Does charts in DataViz support on IE8 ?
A: Yes, it is supported.

Q: Can the CSS be modified as per our need?
A: Yes absolutely. We even provide an online tool to facilitate this: http://demos.kendoui.com/themebuilder/index.html

Q: Can you talk about Kendo UI licensing?
A: Kendo UI is licensed on per developer basis. For more details and discounts, please write to sales@telerikindia.com

Q: Do you have any facility for group license?
A: Yes, absolutely. Please write to sales@telerikindia.com

Q: In the era where the line between PC/Laptop display and mobile display getting blurred day by day, e.g. PCs getting touchscreen, mobiles/tablets getting Full HD/Retina displays, how one should plan their investment for web application? I mean if we are targetting global reach, how you recommend Kendo UI for mobile/MVC?
A: Kendo UI Mobile is used to create Cross-Platform Apps. Using that you create apps for devices and phones . Kendo MVC Wrapper is used in MVC based web apps .

Q: Is this light weight control?
A: Yes, Kendo controls are very light weight controls with no addition to ViewState etc. Since it can use the client side processing capabilities as well, the performance is phenomenonal. It also supports virtualization etc.

Q: Can you elaborate more on “Virtualization”?
A: do take a look here: http://demos.kendoui.com/web/grid/virtualization-remote-data.html

Q: what is MVVM framework?
A: Kendo comes with its own optimized MVVM framework. Please refer to the following webcast that we had done on the same: https://telerikhelper.net/2013/05/31/resources-for-webinar-mvvm-validation-using-kendo-ui-in-web-applications/

Q: Can we use trail version control in any professional web site?
A: No, trial license explicitly forbids you from using it in live/professional web sites. Please write to sales@telerikindia.com and we can help you further with more information.

Q: Not clear how chart series changes according to data
A: Learn more about charts here http://demos.kendoui.com/dataviz/bar-charts/index.html

Q: How can we do conditional validation in KENDO UI?
A: Please do take a look at the demo here: http://demos.kendoui.com/web/validator/index.html

Q: Kendo is for web based or mobile based services?
A: Kendo UI web is meant for web apps. Kendo UI Mobile is meant for mobile. They both share a common base framework.

Q: Will there be wrapper for ASP.NET wrapper in future. We currently use ASP.NET Telerik.
A: We already have a wrapper for ASP.NET MVC. If you are using WebForms, the RadControls are the ideal controls to use. We are constantly adding & updating those controls.

Q: Can we use Kendo UI for java web application
A: Yes, we have a JSP wrapper for the same. More details here: http://www.kendoui.com/server-wrappers/jsp.aspx

Q: Can i use knockout.js with Kendo UI mvc
A: Pls take a look here: http://rniemeyer.github.io/knockout-kendo/

Q: Can we use kendo controls in VS2008
A: Sure, you can. they are simple JS libraries that can be added. It has no IDE requirements.

Q: Is there any other separate editor for Telerik development?
A: We don’t have any IDE requirement for Kendo UI. If you are doing MVC development you will want to use VS and Kendo UI wrapper for MVC

Q: Does the kendo mobile support in all the browser?
A: Yes. It only requires HTML 5 support in the browser. All modern browsers support that.

.NET Ninja T-Shirt Giveaway:

we select 2 person from the webinar attendees and give away our .NET Ninja T-Shirt in each of our webinars. we have picked up 2 lucky persons in this webinar too. They are:

  • Karthikeyan R

  • Harvinder Singh

Congratulations to the winners. We will be contacting you shortly and we will ship your t-shirts. Rest of the folks don’t worry – we still have loads of webinars lined up for this year. So do attend our future webinars without fail and try your luck to be the .NET Ninja.

Till next time – Happy Coding.

Resources for webinar “Building Uncomplicated Single Page Apps (SPAs) with Kendo UI”

Posted by

8

On Jun 6th we conducted a webinar titled “Building Uncomplicated Single Page Apps (SPA) with Kendo UI”. This is part of an ongoing webinar series we here at Telerik India are doing targeting APAC region. We call this the Telerik .NET Ninja Developer Webinar Series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/

SPA or Single Page Application is a way of building web applications which literally consists one single html page.  The application works by creating screens on the client side which is basically nothing but templates and getting the required data at different intervals as JSON payloads. So we showcased Kendo UI power and feature of building these SPA without any complication. The backbone of Kendo UI SPA is Rouer, View and Layout. So through this webinar I showcased how a SPA can be built with much hassle and very easily. Hope you go through the slide decks and the video recording of the webinar and find it useful for you.

Slide Deck:

Here is the slide deck used for the webinar:

Video Recording:

As many of you have been asking, we did record the webinar. So here is the video of the webinar:


Questions & Answers:

During the webinar there were many questions that you guys had asked. We tried our best to answer as many as we can. As a regular practice, we answer all the questions in the recap post. So here are all the questions and answers for them:

Q: where we can use SPA?
A: Anywhere User experience is critical – both enterprise and consumer apps.

Q: How does grid adapt to mobile?
A: Grids are not ideal for mobile applications. You may want to use ListView if you are primarily targeting mobiles.

Q: What is an Observable?
A: Observable is Kendo UI object that is used for supporting MVVM.

Q: How can i design Grid View UI as look like Windows 8?
A: You need to put custom CSS on Kendo Grid to achieve Windows 8 metro GridView look

Q: Do we have any IDE intelligent enough for kendo?
A; If you are using Visual Studio as IDE you will be able to get intellisense. Since its just plain JavaScript you can actually use any editors even Notepad.

Q: Can we have SPA project template for visual studio? i think development can be much quicker using that?
A: We currently don’t have it. Having said that its as easy as adding a stylesheet and a JavaScript and you have Kendo UI in your application. So you don’t need a SPA template as such. But our product team will start looking towards this.

Q: All the data binding must happen in a script tag?
A: Data binding happens in model that ultimately uses Kendo UI DataSource. It saves you a lot of writing AJAX code.

Q: What is a Router?
A: Router is the back bone of SPA feature using Kendo UI. It is responsible for tracking application state and navigating between the app states. You can read more on Router here: http://docs.kendoui.com/getting-started/framework/spa/router

Q: If our SPA is having multiple window and each window is having some sort of datagrids, charts , different lists etc, say various aspects of sales info. So, in that case where should we keep the templates, in the same page or we can put those in other files?
A: Templates can be in the same page or created as a separate script files. When you create templates as different files, you can use concept of Template Loader and load the template as you require. It all depends on your architecture.

Q: Can we create models on the fly? like dynamic?
A: Yes you can.

Q: Is kendo SPA having support for nested template?
A: Yes you can.

Q: Is there any Visual Studio plugin for Kendo UI SPA, which we can get from NuGet Package Manager? if not, does Telerik/Kendo UI has any plan to develop it? – it can be very useful for developers
A: Note that SPA is a feature available out of the box in Kendo UI solution. Kendo UI is available as NuGet package but be aware of the licensing terms. Kendo UI is not a free product. It is a licensed product.

Q: How we can change the Paging to Server side? We have to pass the page numbers and other parameters?
A: Kendo UI data source can page client side by default. If you don’t want that you can set ServerPaging to true and it will pass all the parameters required for paging to your service end point

Q: What about the performance of application when will have millions of record ? How it will be able to load in one time?
A: As a application architect you need to be wary of your data limits. Single Page Application is just a design paradigm of modern Web Applications. You will need to make sure you do paging on the server especially when you have million records. So you take control in this scenario for data loading.

Q: how to implement Kendo UI on SharePoint?
A: Kendo UI is all about 2 style sheet and 1 JavaScript file. So you can create your custom webpart and make sure to package the style sheet and javascript to the right location. The widgets will work as long as the path to the style sheet and script files are set correctly.

Q: Is Kendo UI libraries Open Source?
A: Nope. They are built, supported and sold by Telerik.

Q: Can I use WCF instead of Web API?
A: Yes. With HTTP binding that delivers JSON/ XML payload.

Q: You have edited the items only displaying in grid, if you want to edit more labels or data?
A: By default, the pop up mode of editing in Kendo UI Grid uses the column displayed to create the edit form. If you need to edit additional columns, you will need to create separate edit form and work with that.

Q: Can we use Kendo UI for offline purpose?
A: Kendo UI DataSource along with HTML 5 localStorage can be used.

Q: Data can be any custom XML. How difficult will it be to bind a custom XML with Kendo controls?
A: Yes any custom XML will do. It is as easy as just mapping what node maps to what property of the schema.

Q: IS JS wrapper. available in trial version for our Kendo UI POC that we need to show to our client?
A: Yes. Trial version is available on http://www.kendoui.com

Q: How to upgrade the Kendo UI version, once the application is already deployed
A: The Kendo UI is all about style sheet and JavaScript file. So you just swap the older version files with the new version files. That’s as easy as it can get.

Q: Does licensing allow to edit the source of kendo?
A: Yes. As a licensee you get the source code and you can modify it as per your needs. But you should know what you are doing :).

Q: Is there any service for android?
A: Yes. Please refer to Kendo UI Mobile. http://www.kendoui.com/mobile.aspx

Q: What is the licensing policy of Kendo UI?
A: The licensing is per developer and we do not charge you for deployments i.e. royalty free distribution.

Q: Will this support hybrid app development?
A: kendo UI Web is for web applications. If you are looking for Hybrid Mobile App Development you should take a look at Kendo UI Mobile. Kendo UI Mobile is a mobile control set which does adaptive rendering and is one of the best tools for Hybrid Mobile App development.

Q: What is the shortcut you are using to generate code snippet?
A: I was our Static Code Analysis product called JustCode. JustCode has a feature of Code Templates. So all my demo code were created as templates and a shortcut key associated with them. When have a key stroke which makes JustCode to autocomplete the code pertaining to the short cut key.

Q: Can we dynamically change the themes?
A: Yes you can. It is as easy as grabbing the link tag and changing the style sheet to be used.

Q: supports IE6?
A: We support IE7+ i.e IE8 and on wards.

Q: How it is differ from Upshot supported by Microsoft for SPA?
A: UpShot is not a SPA framework or solution rather it is a JavaScript library to make data retrieval in JavaScript easier. Where as Kendo UI is a complete framework which supports SPA feature out of the box and has a client side data source feature which does the data plumbing between server and client.

Q: Can we able to get the data through database connectivity?
A: The data is retrieved from DB in this demo as well. You need to build a service layer with Web API, WCF Data Service or WCF or any other non-.NET technology to retrieve data from the database

Q: Can we include 3rd party libraries in SPA application?
A: Yes, you are free to include 3rd party libraries. We can’t guarantee that there will be no conflicts.

Q: Does Telerik Test Studio support testing automation of all these?
A: Yes, Test Studio supports automation of Kendo UI controls.

Q: I see you used only JSONs as data type.. what other data-types available?
A: Kendo UI data source works very well with JSON and XML.

Q: Packaging support for android or IOS?
A: If you use our cloud based IDE called ICENIUM, it supports packaging for Android and iOS platforms with just a click.

Q: What about integration with Telerik controls?
A: Sure, this integrates with other Telerik controls too. Depending on the scenario, you can mix and match Telerik technologies.

.NET Ninja T-Shirt Giveaway:

As usual, we will be giving out 2 t-shirts in this webinar also. So following are the lucky winners of this webinar giveaway:

  • Udayakumar Mathivanan
  • Srinivas Abhishek

Congratulations to the winners. We will be contacting you soon on the email ids you have provided us during registration. The t-shirts will be shipped to you soon. Others don’t worry we still have a lot of webinars to go. So keep trying your luck by attending our webinars.

Conclusion:

In our endeavor to bring the Telerik technologies to each one of you, we are doing these series of webinars. Hope you are finding them useful. Looking forward to your presence in future webinars too. Till next time – Happy Coding!

Update:

Here is the GitHub repo to the source code of Kendo UI SPA demo: https://github.com/lohithgn/kendouispa/

 

Resources for Webinar “MVVM & Validation using Kendo UI in Web Applications”

Posted by

2

On May 30 we conducted a webinar titled ”MVVM & Validation using Kendo UI in Web Applications”. We had around 600+ registrations for this webinar. We were very excited that many of you felt that the topic is an interesting one. So we are thankful to all of you who made it to the webinar. Hope you found the webinar useful and that it will be helpful in your day to day work.

image

Slide deck from the webinar:

If you missed attending the webinar, here is a chance to recap it through the slides. Here is the slide deck if you want to download:

Video Recording of webinar:

Many of you had asked if the webinar was recorded. Yes we do record all our webinars and here is the recording of this webinar. Hope this gives you a chance to catch up with the webinar:

Questions & Answers:

Many of you had a lot of questions during the webinar. We did try our best to answer many of them. So we are making sure that we address each one of them through this post. Here are the questions asked during the webinar and answers for the same:

Q: I am a .Net/Silverlight developer. What is the Usage of Kendo UI

A: Kendo can be used to develop HTML 5 apps. More details at: http://www.kendoui.com

Q: Can we use Kendo UI for Windows mobile or only for Androids?

A: Kendo UI Web can be used for Web App development. Kendo UI Mobile controls can be used for developing Hybrid Mobile Apps for multiple platforms i.e. iOS, Android, BB, WP8

Q: Can we use the Kendo UI using C# using .net ?

A: Kendo UI Web & DataViz provide server side wrappers for ASP.NET MVC. So you can program with your comfort of C# & Razor.

Q: Can we develop the Kendo Mobile Project on visual studio IDE, right?

A: Yes you can. Since its just a couple of stylesheet and  javascript, you can always use any editor of your choice. For Hybrid Mobile Application development we also have a cloud based IDE called Icenium – www.icenium.com

Q: By Kendo UI we can create widget – like calender, grid etc

A: Yes you can, though it is only one of its capabilties. Kendo UI Web already provide close to 20+ widgets out of the box. The demos for the available widgets can be found at: http://demos.kendoui.com/web/overview/index.html

Q: Is Kendo UI support all the browsers currently available?

A: We support the following – Internet Explorer 7+, Firefox ESR, Chrome, Safari 5+, and Opera 11+.

Q: Is it mandatory to use MVVM with Kendo UI?

A: No it is not. Kendo UI does support MVVM if you need it.

Q: Is Kendo UI a free version

A: No, Kendo is a paid product. You can

Q: So what is the next roadmap for Kendo?

A: Available here: http://www.kendoui.com/roadmap.aspx

Q: Does Icenium stores my code in a cloud based storage?

A: Yes. It does. The code is stored in Telerik servers. If you do not like our cloud, you can get a GitHub account and integrate Icenium with GitHub.

Q: Is Kendo UI like knockout.js, etc.,?

A: Knockout,js is a JavaScript library for supporting databinding on client side. Where as Kendo UI is a framework which supports the data binding out of the box. So you don’t need any extra library to support databinding and Kendo UI is the only thing you need.

Q: Can it run out of the browser?

A: it runs in the browser only. the browser can be on desktop or on mobile.

Q: So, If I use Kendo UI reference then we do not have to explicitly use jQuery.js reference?

A: Kendo UI depends on JQuery. So you will need to first reference JQuery and then Kendo UI scripts.

Q: In what all flavors(commercial) is Kendo available?

A: Details available here: http://www.kendoui.com/purchase.aspx. You can contact us at sales@telerikindia.com in case you want to make a purchase for yourself / organization.

Q: Does Kendo UI has specific framework for mobile ?

A: One part of Kendo UI known as Kendo UI Web is geared for mobile: http://www.kendoui.com/mobile.aspx

Q: What is this Kendo UI Framework, key points?

A: Marketing folks have done a good job and the features are provided here: http://www.kendoui.com/

Q: Can we use MVVM pattern in normal Asp.net web application?

A: Sure you can, using JavaScript.

Q: So what’s more beneficial to use KENDO UI rather than other available UI tool

A: 1. It is a fully integrated framework (data, UI, MVVM, charts, mobile) 2. Works better 3. Is continuously updated 4. Fully supported.

Q: Which all .Net framework version does Kendo UI supports?

A: Kendo UI Web is server technology obnoxious. Kendo UI is a HTML5 based client side framework. All you need is 2 stylesheet and a JavaScript. But we do provide Server Side Wrappers for ASP.NET MVC 3+.

Q: Does older versions of Visual Studio supports Kendo UI?

A: JavaScript API of Kendo can be used with any IDE (older versions of VS or Eclipse or Notepad)

Q: If i want by pass MVVM and use standard approach / does it support that , What is the licensing model with Kendo?

A: You can use Kendo UI without MVVM as well. MVVM is available in case you need it. Licensing is on a per developer basis.

Q: After getting product, is there any charge for support or maintenance from Kendo UI team?

A: The licenses are perpetual in nature. If you want product updates and support from the team, you have to maintain an active subscription by paying a renewal fee.

Q: Can we update the theme?

A: Yes. By simply changing the CSS file. And you can create your custom themes as well.

Q: Does Kendo UI has dependency on jQuery?

A: The only dependency Kendo UI has is that on JQuery and nothing else.

Q: Kendo provides any database also ?

A: No. Data has to be available over a Web Service. Kendo provides a client side data connectivity solutions.

Q: So after getting this product, is any training or demo free from kendo team?

A: A good getting started tutorial is available as Kendo Dojo: http://www.kendoui.com/dojo.aspx You can also request training from the product team as a paid activity.

Q: For email field, can we place two messages, suppose one for mandate entry and another for the format, ex: email is required and invalid email format?

A: Yes you can. you can use data-email-msg format to provide a message when email format fails.

Q: where can I view the old videos?

A: Telerik India Webinar resources: https://telerikhelper.net/category/webinars/. More Videos at: http://tv.telerik.com

Q: Definitely Kendo UI reduces the development effort. Can you quantify? How much it will reduce ?

A: We estimate this to be in the range of 20-30%.

Q: Does kendo use Knockoutjs for MVVM?

A: Nope. Kendo has its is own framework for MVVM. Doesn’t use KO.

Q: can we access server objects like sessions and application variables using Kendo?

A: No. Because Kendo UI is a client side framework.

Q: Do i need to download anything to use Kendo UI in VS2010?

A: Kendo UI can be used in 2 ways. Pure JavaScript way – for which you will  need the stylesheet and JavaScript. We provide Server Side Wrappers for ASP.NET MVC 3+. That will let you code Kendo UI from server side.

Q: More specific to Kendo UI : Does it take advantage of HTML5?

A: Kendo UI is based on HTML5 based. So we make use of HTML5 features to the core.

Q: How do we integrate web services in REST based calls in Kendo UI data binding?

A: Kendo UI has a feature known as Data Source. So this data source can be configured with CRUD endpoints and rest of the things will be done by the data source.

.NET Ninja T-Shirt Giveaway:

If you have been following our webinars you will know by now that we have been raffling out 2 .NET Ninja T-Shirts in each of our webinar. So we pick the following two people to receive our t-shirt for this webinar:

  • Mirang Parikh
  • Mohanrao Theeda

Congratulations to the winners. We will be contacting you shortly with the email you have provided. We will be shipping you your t-shirt. Rest of you folks don’t worry, we still have many more webinars to come. So make sure you attend without fail.

Till next time, Happy coding.

Kendo ColorPicker Wrapper for ASP.NET MVC

Posted by

2

Overview:

This is the eight post in the series on Kendo UI wrappers for ASP.NET MVC. We will look at one more wrapper in this post namely Color Picker. This post is part of a getting started with Kendo UI wrappers for ASP.NET MVC and you can find the index post here.

What is ColorPicker Wrapper?

The ColorPicker is a drop-down widget for selecting colors. It’s designed to replace a HTML5 <input type="color"> field, which is not yet widely supported in browsers. ColorPicker widget provides a user-friendly interface for picking colors.

image

Fig 1: ColorPicker Widget

ColorPicker wrapper is just a kendo helper for ASP.NET MVC.

Basic Usage:

In order to use the ColorPicker widget on any page, we will use the ColorPicker wrapper or helper available as part of the kendo wrappers. Following is the code to create a color picker on any page. Note that Name() is a mandatory setting for the color picker. Without setting the name we will get an exception which will tell that name is not set.

@(
Html.Kendo().ColorPicker()
.Name("picker")
)
view raw KendoUI-ColorPicker.cshtml hosted with ❤ by GitHub

Here is the output of the above code:

image

Fig 2: Color Picker Basic Usage

Color Palette:

We can customize the color palette that is displayed in the color picker drop down. The wrapper provides Palette() configuration method which accepts the palette. There 2 ways of providing the palette. They are:

1. ColorPickerPalette Enumeration:

We can pass enum called ColorPickerPalette to Palette() method of the widget. The enum supports Basic, None and WebSafe palette. Here is the code for setting the palette:

@(
Html.Kendo().ColorPicker()
.Name("kPickerBasic")
.Palette(ColorPickerPalette.Basic)
)
view raw KendoUI-ColorWidgetPalette.cshtml hosted with ❤ by GitHub

Here is the output of setting palette to Basic, WebSafe and None:

image

Fig 3: Basic Color Palette

image

Fig 4: Web Safe Palette

image

Fig 5: No Palette

2. Provide Palette as Array

We can pass a string array to Palette() method which should contain the hex codes of the colors we want to show in the palette. Here is the code to do this:

@(
Html.Kendo().ColorPicker()
.Name("kPickerBasic")
.Palette(new string[] {
"#f0d0c9", "#e2a293", "#d4735e", "#65281a",
"#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
"#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
"#e1dca5", "#d0c974", "#a29a36", "#514d1b",
"#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
})
)
view raw KendoUI-ColorPickerCustomPalette.cshtml hosted with ❤ by GitHub

And here is the output of the code changes:

image

Fig 6: Custom Palette

Custom Color Tile Size:

So far we have seen how the color picker works and what palettes it supports. One thing to notice in palettes is the size of the individual color tiles. It looks small. What if we wanted a bigger tile? The wrapper supports a TileSize() configuration method which takes in an integer. Here is a code set the tile sizes of the color palette:

@(
Html.Kendo().ColorPalette()
.Name("color-chooser")
.Palette(new string[] { "#ddd1c3", "#d2d2d2",
"#746153", "#3a4c8b",
"#ffcc33", "#fb455f",
"#ac120f" })
.Value("#ffcc33")
.TileSize(30)
)
view raw KendoUi-ColorPickerCustomTileSize.cshtml hosted with ❤ by GitHub

Here is the output of above code changes:

image

Fig 7: Custom Color Tile Size

Accessing control on client:

So far we have seen how to instantiate a control with the helpers. And since the Kendo controls are all client side, lets take a look at how to get the control using JavaScript code. Kendo controls are HTML5 compliant so we make use of HTML5 attributes like “data-“ and construct our controls. You can use the jquery data() method to get to an already instantiated control. Here is the code snippet for the same:

<p>
@(Html.Kendo().ColorPalette()
.Name("color-chooser")
.Palette(new string[] { "#ddd1c3", "#d2d2d2",
"#746153", "#3a4c8b",
"#ffcc33", "#fb455f",
"#ac120f" })
.Value("#ffcc33")
.TileSize(30)
)
</p>
<script>
$(document).ready(function () {
var colorPicker = $("#color-chooser").data("kendoColorPalette");
var selectedColor = colorPicker.value();
});
</script>
view raw kendoui-colorpicker-clientside.cshtml hosted with ❤ by GitHub

Accessing & Setting Value from client side:

All kendo controls have rich client side API support. One of the api method is value() which lets you read the selected value and also set new value of the color picker. Here is the code:

<p>
@(Html.Kendo().ColorPalette()
.Name("color-chooser")
.Palette(new string[] { "#ddd1c3", "#d2d2d2",
"#746153", "#3a4c8b",
"#ffcc33", "#fb455f",
"#ac120f" })
.TileSize(30)
)
</p>
<script>
$(document).ready(function () {
var colorPicker = $("#color-chooser").data("kendoColorPalette");
colorPicker.value("#ffcc33");
var selectedColor = colorPicker.value();
});
</script>
view raw kendoyui-colorpicker-getsetvalue.cshtml hosted with ❤ by GitHub

In the above code – we just created the color picker using the server side helpers. On client side, after document has loaded, we grab the control, use the value() method to set a new value. And then use the same method to read back the selected value.

Handling Events:

Color Picker supports four events which can be handled on the client side. They are:

  • change: Fires when a color was selected
  • select: Fires when a new color is displayed in the drop-down picker
  • open: Fires when the picker popup is opening
  • close: Fire when the picker popup is closing

Here is the code wire up the events and JavaScript code for the handlers:

<p>
@(Html.Kendo().ColorPicker()
.Name("palette-picker")
.Value("#cc2222")
.Palette(ColorPickerPalette.Basic)
.Events(events => events
.Select("pickerSelect")
.Change("pickerChange")
.Open("pickerOpen")
.Close("pickerClose")
)
)
</p>
<script>
function pickerSelect(e) {
var selectedValue = e.value;
}
function pickerChange(e) {
var selectedValue = e.value;
}
function pickerOpen(e) {
//custom code
}
function pickerClose(e) {
//custom code
}
</script>
view raw kendoui-colorpicker-events.cshtml hosted with ❤ by GitHub

Summary:

Through this post we looked at yet another kendo wrapper for MVC namely Color Picker. Using color picker is as easy as settings some configuration methods and the rest is done by the helper for you. Hope this excites you to test out Kendo UI in your projects.

Till next time, Happy Coding.

Kendo Editor

Kendo Editor Wrapper for ASP.NET MVC

Posted by

5

Overview:

This is the seventh post in the series on Kendo UI wrappers for ASP.NET MVC. We will look at one more wrapper in this post namely Editor. This post is part of a getting started with Kendo UI wrappers for ASP.NET MVC and you can find the index post here.

What is Editor Wrapper?

First lets understand what is a Editor control all about. The Editor allows users to create rich text content by means of a WYSIWYG interface. The generated widget value is comprise of XHTML markup.

imageFig 1: Kendo Editor

The Editor Wrapper for ASP.NET MVC is a server side wrapper for Kendo UI Editor which is a JavaScript based widget.

Basic Usage:

In order to use the kendo editor on any web page, we will use the Editor wrapper available as part part of the Kendo Wrappers for ASP.NET MVC. Following is the code for the basic usage where in we just instantiate the kendo editor and give it a name while setting the width & height.

@(
Html.Kendo().Editor()
.Name("kEditor")
.HtmlAttributes(new {style="width:740px;height:440px"})
)
view raw KendoEditor-BasicUsage.cshml hosted with ❤ by GitHub

Note that you need to set the Name for the editor. Other wise we will be issued a InvalidOperation exception at runtime which will say “Name cannot be blank”. Following is the screen shot of the output:

image

Fig 2: Kendo Editor Basic Usage

Tools Bar:

The top bar on the editor is known as Tools bar. By default the editor will display the basic necessary tools without we explicitly specifying them. The editor supports the following tool options:

1. Bold 13. InsertUnorderedList
2. Italic 14. InsertOrderedList
3. Underline 15. Indent
4. Strikethrough 16. Outdent
5. FontName 17. FormatBlock
6. FontSize 18. CreateLink
7. FontColor 19. Unlink
8. BackColor 20. InsertImage
9. JustifyLeft 21. SubScript
10. JustifyCenter 22. SuperScript
11. JustifyRight
12. JustifyFull

Table 1: Tool Bar Configuration Option

So here is the code to get all the tools on the tool bar:

@(
Html.Kendo().Editor()
.Name("kEditor")
.Tools(tools => tools
.SubScript()
.SuperScript()
)
.HtmlAttributes(new {style="width:740px;height:240px"})
)
view raw KendoEditor-AllToos.cshtml hosted with ❤ by GitHub

Here is the output of the above code changes:

image

Fig 3: All Tools on the Tool Bar

Note: In order to get all the tools we just added Subscript() and Superscript() options. That is because, editor control will default add tools from 1 to 20 in the above table. So we just added missing tools. If you want to keep only some tools on the tool bar, you will need to first clear the tools and then add the tool option you want. Following code will add only FontName, FontSize, ForeColor and BackColor to the tool bar:

@(
Html.Kendo().Editor()
.Name("kEditor")
.Tools(tools => tools
.Clear()
.FontName()
.FontSize()
.FontColor()
.BackColor()
)
.HtmlAttributes(new {style="width:740px;height:240px"})
)
view raw KendoEditor-ToolsOptions.cshtml hosted with ❤ by GitHub

Here is the output of the above code changes:

image

Fig 4: Custom Options in Tool Bar

Custom Tool Bar Options:

So far we saw the default tool bar options available in Kendo. What if we want to have a custom tool bar option. Lets say we want to provide a button to draw a horizontal rule in the editor – it can be done by making use of the CustomButton() support in the editor. Here is the code to do that:

@(
Html.Kendo().Editor()
.Name("kEditor")
.Tools(tools => tools
.Clear()
.FontName()
.FontSize()
.FontColor()
.BackColor()
.CustomButton(cb => cb
.Name("HorizontalRule")
.ToolTip("Insert a horizontal rule")
.Exec(@<text>
function(e)
{
var editor = $(this).data("kendoEditor");
editor.exec("inserthtml",{value:"<hr />"});
}
</text>)
)
)
.HtmlAttributes(new {style="width:740px;height:240px"})
)
view raw KendoEditor-CustomButton.cshtml hosted with ❤ by GitHub

Here is the output of the above code changes:

image

Fig 5: Custom Button in Tool Bar

Adding Snippets:

Snippets are short piece of text and can be anything. For e.g. an email signature is a text snippet we normally create and store in our mail programs. The mail programs inserts the signature whenever we compose new mail. Similarly Kendo Editor provides ability to create snippets and enable end users to pick the snippet to insert as text. Following is the code:

@(
Html.Kendo().Editor()
.Name("kEditor")
.Tools(tools => tools
.Clear()
.Snippets(snippets => snippets
.Add("Signature","<p>Regards,<br /> Lohith G N,<br /><a href='mailto:lohith.nagaraj@telerik.com'>lohith.nagaraj@telerik.com </a></p>")
.Add("Kendo Online Demos"," <a href='http://demos.kendoui.com'>Kendo online demos</a> ")
)
)
.Value(@<text>
Put the cursor after this text and use the "Insert HTML" tool.
</text>)
.HtmlAttributes(new {style="width:740px;height:240px"})
)
view raw KendoEditor-Snippet.cshtml hosted with ❤ by GitHub

Here is the output of the above code changes:

image

Fig 6: Snippets Feature

Custom Styling of content:

So far we have seen some of the core functionality of the editor. Another awesome feature of editor is the support for custom styling to the content. You can pretty much define your own style classes and within the editor provide it like a drop down option. Editor supports Styles() option to provide the custom style. Here is the code to achieve this:

<!--Editor Styles-->
.hlError
{
background-color:#fea;
color:#f33;
}
.hlOK
{
background-color:#aef;
color:#060;
}
.inlineCode
{
font:bold 12px monospace;
}
@* Code *@
@(
Html.Kendo().Editor()
.Name("kEditor")
.Tools(tools => tools
.Clear()
.Styles(styles => styles
.Add("Highlight Error", "hlError")
.Add("Highlight OK", "hlOK")
.Add("Inline Code", "inlineCode")
)
)
.StyleSheets(styles => styles.Add(Url.Content("~/Content/EditorStyles.css")))
.Value(@<text>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
In this version, the Editor provides the core HTML editing engine, which includes basic
text formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major
browsers, follows
accessibility standards and provides API for content manipulation.
</text>)
.HtmlAttributes(new {style="width:740px;height:240px"})
)
view raw KendoEditor-CustomStyles.cshtml hosted with ❤ by GitHub

If you look at the code what we have done is, created 3 styles for the demo sake and created a new stylesheet named editorStyles.css. We use the Styles() options to add the custom styles and use the Stylesheets() option to add reference to EditorStyles.css. Note the styling Kendo has added to Styles drop down. while setting it up – we just had given a text value pair for a style. Kendo applies the style for the drop down item – neat I say. Here is the output of the above code changes:

image

Fig 7: Custom Styling of content

Handling client side events:

Kendo widgets being client side controls, we have very rich API support on the client side. One of the API feature is that of client side event handling. Editor supports the following events:

  • change – Fires when Editor is blurred and its content has changed
  • execute – Fires when an Editor command is executed
  • paste – Fires before when content is pasted in the Editor
  • select – Fires when the Editor selection has changed

Here is the code to hook on to the client events for the editor:

@(
Html.Kendo().Editor()
.Name("kEditor")
.Events(events => events
.Change("change")
.Execute("execute")
.Select("select")
.Paste("paste")
)
.Value(@<text>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
In this version, the Editor provides the core HTML editing engine, which includes basic text
formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers,
follows
accessibility standards and provides API for content manipulation.
</text>)
.HtmlAttributes(new {style="width:740px;height:240px"})
)
</p>
<div class="console"></div>
<script>
function change(e) {
$(".console").append("change <br />");
}
function execute(e) {
$(".console").append("execute command :: " + e.name + "<br />");
}
function select(e) {
$(".console").append("selection change <br />");
}
function paste(e) {
$(".console").append("paste <br />");
}
function contentLoad(e) {
$(".console").append("Content loaded in <b>" + $(e.item).find("> .k-link").text() +
"</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b> <br />");
}
function error(e) {
$(".console").append("Loading failed with " + e.xhr.statusText + " " + e.xhr.status + "<br />");
}
</script>
view raw KendoEditor-Events.cshtml hosted with ❤ by GitHub

Here is the output of the above code changes:

image

Fig 8: JavaScript Event Handling

Accessing Editor from client side:

As mentioned in the previous section all Kendo widgets support a rich API and once instantiated we can grab the control at runtime. Here is the JavaScript code do that:

<p>
@(
Html.Kendo().Editor()
.Name("kEditor")
.HtmlAttributes(new {style="width:740px;height:240px"})
)
</p>
<script>
$(document).ready(function () {
var editor = $("#kEditor").data("kendoEditor")
editor.value("Text added at runtime")
});
</script>
view raw KendoEditor-API.cshtml hosted with ❤ by GitHub

As you can see, on document ready we grab the element which has the id kEditor and then use jquery’s data() method to get the Kendo Editor component. After that we set the content of the editor using the value() method. The client side API support a rich set of methods, properties and events. For a complete API listing, check out our docs page: Kendo Editor API.

Summary:

In this post we looked at one more wrapper namely Editor. It is very easy to work with Editor ASP.NET MVC wrapper and with just couple of lines we have a fully working editor set up. Also we saw how the control supports a rich set of client side API to work with. Hope this post helps you with your endeavor on Kendo Editor.

WebMatrix 2, NuGet, Kendo UI Web = Awesome combination

Posted by

2

In this blog post, we will look at how easy it is to get started with Kendo UI Web using WebMatrix as a development tool. we will look at what is this WebMatrix in brief and how you can play with Kendo UI Web widgets within WebMatrix.

image Kendo logo

What is WebMatrix:

WebMatirx is a free and lightweight web development tool. You can create, publish and maintain your website with ease right within WebMatrix. You can know more about WebMatrix here: http://www.microsoft.com/web/webmatrix/

image

Installing WebMatrix:

WebMatrix can be installed by using the Web Platform Installer 4.0. Click the following button to install the WebMatrix. This will download an exe and launch the Web Platform Installer 4.0.

image

The Web Platform Installer will have an option to select WebMatrix 2 Release Candidate. Just select that and perform the installation.

SNAGHTML1d262f33

Creating a Web Site using WebMatrix:

Once installed launch the WebMatrix from Start Menu. With WebMatrix we have 2 options to create a new web site.

SNAGHTML1d2a1cbc

We can use the Templates option to select from a pre defined 12 templates which includes ASP.NET, PHP, Node & HTML templates or we can use App gallery to download 61 open source application to start with.

SNAGHTML1d2bc8f2 SNAGHTML1d317d72

For this blog post, I will be creating an empty site which can be found under Templates option. Give a name to the new site and hit Next button.

SNAGHTML1d330650

WebMatrix will go ahead and get the pre requisite for the template we have selected, install and configure the site for us.

SNAGHTML1d33f30e

Once configured the site dashboard will look like below:

SNAGHTML1d34f5bc

As you can see, the site is created in user’s Documents folder.

Integrating Kendo UI:

One of the new features added to WebMatrix 2 is the support of NuGet packages. From the web site dashboard, select the Files workbench located in the left hand bottom corner. This will show the file structure of the project. Also notice the change in the ribbon in this view. On the far right hand top corner you will see a familiar NuGet Package icon. Similar to the package addition experience in Visual Studio here also within WebMatrix we can perform pretty much the the same steps to get a package. So lets see how to get Kendo UI Web.

SNAGHTML1d8c52bc

Click on the NuGet Gallery button. You will be presented with NuGet Gallery window as below:

image

In the search string enter “Kendouiweb” and wait for the results to come back. NuGet will find one package with that search string and show you that in the results pane. Select the package and click Install.

image

Next screen it will show information of the package. Click Install again on this screen.

image

At this point, WebMatrix will retrieve the package information from NuGet server. It will get the End User License Agreement if any and show you that. You have option to Accept or Reject the EULA. If you accept the agreement package will be installed otherwise installation will be skipped.

image

Note: At this moment it is important for you to know that you are downloading Kendo UI Web trial version and I urge you to read the trial license without fail. This trial download allows you a free trial of Kendo UI Web framework for 30 days.  You can click on the “View License Terms” to understand the EULA. Alternatively, you can visit the licensing FAQ here http://www.kendoui.com/faq/licensing.aspx and here http://www.kendoui.com/purchase/license-agreement/kendo-ui-trial.aspx

Once you click on Accept, the package will be retrieved and installed in our application. Here is the folder structure after package installation.

SNAGHTML1d9ac29e

As you can see from the above screen shot, Kendo UI framework related files have been downloaded and added to our application. The stylesheet’s are placed in Content folder and java script files are placed in Scripts folder. Next we will see how to work with Kendo UI Web Widgets

Create UI with Kendo:

Working with Kendo UI Web framework is 3 steps – Stylesheet reference, JavaScript reference and defining the HTML. So we will see them one by one.

Open the Default.cshtml and start by placing reference to Kendo UI Web stylesheets. Kendo UI comes with the following themes out of the box:

  • Black
  • Blue Opal
  • Default
  • Metro
  • Silver

Apart from the above theme stylesheets, we have a common stylesheet which is required for all other theme stylesheets to work. So here is the stylesheet reference code:

<link href="/Content/kendo/2012.2.710/kendo.common.min.css" 
rel="stylesheet" />
<link href="/Content/kendo/2012.2.710/kendo.default.min.css" 
rel="stylesheet" />

Next, we reference the javascript required to work with Kendo UI. Here is the script tag snippet:

<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/kendo/2012.2.710/kendo.web.min.js"></script>

Next we defined the HTML. In this example I am going to create a UI Widget called DateTimePicker i.e. a widget which allows users to select Date and as well as Time in a single control. In the body of the page declare a input tag, give it an id and set a value to any date and time value. Here is the code snippet:

<input id="datetimepicker" value="10/12/2012 01:00 PM"
style="width:200px;" />

Next, on document ready we will refer the input tag by its id and ask kendo to transform that into an DateTimePicker widget with just one line of code as below:

<script>
    $(document).ready(function() {
        // create DateTimePicker from input HTML element
        $("#datetimepicker").kendoDateTimePicker();
    });
</script>

We use JQuery to get a reference to the input tag by its id and then invoke a kendo function kendoDateTimePicker() which does the magic under the hood to transform the input tag to a date time control like below:

image image

Here is the complete HTML code snippet of Default.cshtml:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Site's Title</title>
        <!-- Step 1 : StyleSheet Reference -->
        <link href="/Content/kendo/2012.2.710/kendo.common.min.css" 
            rel="stylesheet" />
        <link href="/Content/kendo/2012.2.710/kendo.default.min.css" 
            rel="stylesheet" />

        <!-- Step 2 : JavaScript Reference -->
        <script src="~/Scripts/jquery-1.7.2.min.js"></script>
        <script src="~/Scripts/kendo/2012.2.710/kendo.web.min.js"></script>
    </head>
    <body>
        <div id="example" class="k-content">
            <div id="to-do">
                    <input id="datetimepicker" value="10/12/2012 01:00 PM" 
                    style="width:200px;" />
            </div>
        </div>
         <script>
            $(document).ready(function() {
                // create DateTimePicker from input HTML element
                $("#datetimepicker").kendoDateTimePicker();
            });
        </script>
    </body>
</html>

Here is the output of the code we just wrote:

image

Well that’s how easy it is to work with Kendo.

Conclusion:

WebMatrix is a great tool which is free and is best suited for lightweight web development. Through this post we have now seen the webMatrix support for NuGet packages. We saw how easy it is to get going with Kendo UI Web controls right from the step of looking at the package to installing to coding our first example with Kendo – all done within WebMatrix.

More information about Kendo UI can be seen at www.kendoui.com. You can view more demos of Kendo UI Web at the site itself. Here is a direct link to launch the demos –

image

You can also download Kendo UI directly from the site for a 30 day free trial. Here is the direct link for the download:

image

Hope this excites you to start coding with Kendo UI. Looking forward to your experiences with Kendo. Till next time – Happy Coding !.

4 Steps to Kendo UI

Posted by

0

Overview:

In this post, we will look at the steps involved in working with Kendo UI. For those of you who are hearing about Kendo UI for the first time – I would recommend you head straight to www.KendoUI.com and spend couple of moments there to familiarize yourself with Kendo UI. In brief Kendo UI is

Kendo logo

A comprehensive, end-to-end framework, compatible with jQuery, and custom-built from the ground up for rock-solid reliability and lightning-fast performance. Includes MVVM support, a rich DataSource, several UI widgets, and everything you need to build rich JavaScript applications today.

It takes 4 steps to working with Kendo UI. So lets see the 4 steps in detail in the coming sections.

 

Step 1:

The simplest of all the steps :). This step involves downloading of Kendo UI. You can download Kendo UI from the download page at: http://www.kendoui.com/download.aspx.

Kendo UI comes in 3 flavors, namely:

  • Kendo UI Web – UI controls to be used in web applications
  • Kendo UI Data Viz – Data Visualization controls for both Web and Mobile platforms
  • Kendo UI Mobile – UI controls for Mobile platforms like iOS, Android and BlackBerry

Kendo UI comes with a free 30 day trial and I highly recommend downloading that. Rest of the sections will assume that you have downloaded kendo ui on to your hard disk.

Step 2:

Once you have downloaded the Kendo UI on to your hard drive next step is to start using it in a HTML page. First piece to get in place is the stylesheets required by the Kendo itself. These stylesheets are responsible for giving the look and feel of the UI controls or widgets as we call them. When you install the Kendo ui the styles folder contains all the required stylesheets. Kendo UI ships with  5 themes namely – Default, Black, Blue Opal. Metro and Silver.

We need to first reference the common stylesheet required by the Kendo framework. The link tag for this as follows:

<link href=”styles/kendo.common.min.css” … />

Here are the theme specific stylesheet which must be referenced while applying a particular theme:

  • Default theme:

<link href=”styles/kendo.black.min.css” … />

  • Black theme:

<link href=”styles/kendo.black.min.css” … />

  • Blue Opal theme:

<link href=”styles/kendo.blueopal.min.css” … />

  • Metro theme:

<link href=”styles/kendo.metro.min.css” … />

  • Silver theme

<link href=”styles/kendo.silver.min.css” … />

If you are using DataViz framework then you would need to refer DataViz stylesheet apart from the common stylesheet. Here is the link tag for that:

<link href=”styles/kendo.dataviz.min.css” … />

Here is the HTML code for step 2:

<!DOCTYPE html>
<html>
  <head>
    <title>Kendo UI</title>
    <!-- Kendo UI Web styles -->
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
  </head>
  <body>
  </body>
</html>

Step 3:

Once we have the stlesheet in place, next it to add the Javascripts which is required for the initialization of the UI controls/widgets themselves.

So for web applications, the first script to reference is the jquery. Then reference the kendo.web.min.js file from the js folder. Here is how the =script tag will look like:

<script src=”js/jquery.min.js” ..></script>
<script src=”js/kendo.web.min.js” ..></script>

If you are working with Data Visualization, then instead of the kendo.web.min.js you will need to refer kendo.dataviz.min.js file.

Here is the HTML code for step 3:

<!DOCTYPE html>
<html>
  <head>
    <title>Kendo UI</title>
    <!-- Kendo UI Web styles -->	
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />

    <!-- Kendo UI Web scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>	

  </head>
  <body>
  </body>
</html>

Step 4:

This is the interesting step. With Step 2 and Step 3 we have set the stage for the most interesting part of the journey with Kendo UI. Stykesheets and scripts necessary to work with Kendo UI has been referenced. Now we see how to initialize the kendo UI controls or widgets. Kendo UI Web as nearly 19 widgets to work with. You can know more about this at http://demos.kendoui.com/web/overview/index.html.

For this exercise I will take a simple control like Calendar widget and show you how to initialize that. To start with, place a div in the HTML body and give it name, let’s say “kendo-calendar”. Next spin up a jquery statement for document ready and code the following:

<script>
  $(document).ready(function(){
    $("#kendo-calendar").kendoCalendar();
  })
</script>

well that’s all its there to working with kendo UI. What we have done is, we have grabbed the div which have placed it in the HTML body and used kendo framework to turn that into a pretty neat calendar. Here is the code for the Step 4:

<!DOCTYPE html>
<html>
  <head>
    <title>Kendo UI</title>
    <!-- Kendo UI Web styles -->	
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />

    <!-- Kendo UI Web scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>	

  </head>
  <body>
	<div id="kendo-calendar"></div>
	<script>
		$(document).ready(function(){
			$("#kendo-calendar").kendoCalendar();
		});
	</script>
  </body>
</html>

Here is the live version of the same code that I have created in jsfiddle:

http://jsfiddle.net/kashyapa/CrEZb/

Summary:

In this post we saw how easy it is to work with Kendo UI. with simple 4 steps you are ready to take a ride with Kendo UI. Although we saw a simple example of calendar being initialized, pretty much all the widgets in Kendo UI can be initialized in the same mechanism. Hope you will do the step 1 and following along till step 4.

Till next time, Happy coding.