Using Kendo UI with VisualForce

For a project I am working on there is a need to use the Kendo UI JavaScript environment inside a Visual Force page. I am rather newbie for both Kendo UI and Visual Force so the task that must be simple took me a little bit longer than I expected. Since I could not find any reference for such combination thus far, i decided to write the following recipe.

Steps to take:

1. Download the Kendo UI library. Download the complete zip file so you will have everything (Kendo is actually a combination of three deliverables – Web, Mobile and DataViz). Link to the site http://www.kendoui.com/get-kendo-ui.aspx

2. Repackage the required Kendo UI components into zip file under the 5mb limit. In my case, I’ve done the following:

a. Remove the /examples folder

b. Create new folder /content with the few images that will be needed. In my example just the four images under /examples/content/dataviz/guage

c. Re-zip the Kendo UI folder into new file: KendoUI.zip

3. Upload the new KendoUi.zip into the static resource:

a. From the App Setup, select Develop and in the sub-menu select Static Recources

b. Click on new, upload the KendoUI.zip and call that recourse KendoUI

4. Create a new visual force page and correct the references to the resource:

a. As a beginning I just used the demo code for the leaner gouge from http://demos.kendoui.com/dataviz/linear-gauge/index.html

The original code is as follows:

<!DOCTYPE html>
<html>
<head>
    http://jquery.min.js
    http://source/kendo.all.js
    <link href="styles/kendo.common.css" rel="stylesheet" />
    <link href="styles/kendo.default.css" rel="stylesheet" />
</head>
<body> 
$(document).ready(function() { $("#linear-gauge").kendoLinearGauge(); })  $("#linear-gauge").kendoLinearGauge({ pointer: { value: 20 }, scale: { min: 10, vertical: false } });  </body> </html>

The same code will more or less work with just the minimal VisualForce required changes to reference the URLs embedded in the KendoUI zip file:

<apex:page> 
<head>
<apex:includeScript value="{!URLFOR($Resource.KendoUI, '/js/jquery.min.js')}"/><apex:includeScript value="{!URLFOR($Resource.KendoUI, '/js/kendo.all.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.KendoUI, '/styles/kendo.common.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.KendoUI, '/styles/kendo.default.css')}" />
</head>
<body> 
$(document).ready(function() { $("#linear-gauge").kendoLinearGauge(); })  $("#linear-gauge").kendoLinearGauge({ pointer: { value: 20 }, scale: { min: 10, vertical: false } });  </body> </apex:page> 

And that was all. Only the lines in Blue are changed to make it work in the Visual Force environment. Very simple!

Advertisements

Author: dave

Consider myself kid in soul and naive by choice. I am interested in people, technology and business and thrive when they all work together. My favorite quote and motto is that “You can fool some people some times but you cant fool all the people all the time” ― Bob Marley

3 thoughts on “Using Kendo UI with VisualForce”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s