Click here to Skip to main content
Click here to Skip to main content

Kendo UI : All about Web Widgets

By , 13 Jun 2013
Rate this:
Please Sign up or sign in to vote.

Editorial Note

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

In this section we will cover all about touch enabled and web widgets provided by Kendo UI, what are Kendo UI web widgets, what widgets are available and where you can find them, after that we will talk about basic usage of web widgets, configuration, event binding and finally styling of web widgets.

What are web widgets?

Web widgets are a collection of HTML5 controls that are based on jQuery core which are designed for web and touch enabled desktop development and like the rest of Kendo UI they are built with performance in mind, here I would like to mention that although the widgets are based on jQuery core but they are not the extension of jQuery but are built from the ground level by Kendo UI team. Let's have a look what widgets are available in Kendo UI, it has a quite extensive list:

  • AutoComplete
  • Calendar
  • ComboBox
  • DatePicker
  • DateTimePicker
  • DropDownList
  • Editor
  • Grid
  • ListView
  • Menu
  • NumericTextBox
  • PanelBar
  • Slider
  • Splitter
  • TabStrip
  • TimePicker
  • TreeView
  • Upload
  • Window
 

The best way to get familiar with extensive range of available web widgets is to go online on demos.kendoui.com/web or go to the examples directory of Kendo UI download.

Usage

Let's start looking at the implementation process how we can use the Kendo UI widgets in our web pages as the Kendo UI widgets are based on jQuery using them is very similar, first we write the markup and then we initialize our markup:

  • Markup
    [code]<input id="dateofBirth" />[/code]

    Here is an input field with the id of 'dateofBirth'

  • Initialize
    [code lang="js"]
    <script type="text/javascript">
           $(document).ready (function () {
                    $("#dateofBirth").kendoDatePicker();
           });
    </script>
    [/code]

    We have a jQuery document ready function and inside that ready function I'm selecting my element by ID and then I'm applying 'kendoDatePicker' function to it. Applying this function initializes the element as Kendo Date Picker.

There is an alternative means of initializing your Kendo UI web widget called declarative initialization. This takes advantages of "data-" attribute of HTML5 to assign roles to your HTML elements, so just like in above example first we will define the markup and then initialize it.

  • Markup
    [code]<input id="dateofBirth"  data-role="datepicker" />[/code]

    Here we are making use of "data-role" attribute with defining the role of "datepicker", the value of data-role attribute is the name of the web widget in all lower case.

  • Initialize
    [code lang="js"]<script type="text/javascript">
           $(document).ready (function () {
                    kendo.init($("#dateofBirth"));
           });
    </script>
    [/code]

    Just like the previous usage my initialization lies in the jQuery document ready function but unlike the previous example here I'm calling the kendo.init() and then I'm using jQuery selector to select my element by id and passing it into kendo.init(), in this example kendo is taking care of initialization of control and we just need to call the init function, this is the implementation preferred because you can look at the markup and clearly understand which control is used in it.

Configuration

Whenever we use any third party control the first thing in our mind is that to which extent they are configurable so Kendo UI is an extremely configurable set of widgets, how you configure depends on the method of initialization you chose. If you use the basic non declarative initialization then you need to configure by providing JSON-formatted settings to the widgets constructor. If you use declarative initialization using the data attribute you would configure your widgets using data attribute as well.

  • JSON-formatted settings
    [code lang="js"]
    $("dateofBirth).kendoDatePicker(
            {format: "yyyy/MM/dd"}
    );
    [/code]
  • Data Attributes
    [code lang="html"]<input id="dateofBirth"  data-role="datepicker"
     data-format="yyyy/MM/dd" />[/code]

Data Source Configuration

Widgets that are data driven such as combo box, auto complete and grid have a data source which provides the data required by the widget, like simple configuration DataSource configuration also depends on the type of initialization, if you use the basic non-declarative initialization then you would need to configure by setting the data source property in the widgets constructor. If you use declarative initialization using data attribute then you would configure the data source by using the "data-source" property in the markup.

  • Data Source configuration for basic initialization
    [code]<br/><input id="colorPicker" />
    
    <script type="text/javascript">
    $(document).ready(function() {
         $("#colorPicker").kendoComboBox({
                 dataSource: ["Blue", "Green", "Red", "Yellow"]
          });
    });
    </script>
    [/code]
  • Data Source Configuration for Declarative Initialization
    [code]<input id="colorPicker" data-role="combobox"
    data-source='["Blue", "Green", "Red", "Yellow"]' />
    
    <script type="text/javascript">
    $(document).ready(function() {
         kendo.init($("#colorPicker"));
    });
    </script>
    [/code]

Event Binding

After configuring and all somewhere you will need to bind events to the web widgets and again how you bind your events depends on the type of initialization.

If you use the basic non-declarative initialization then you need to bind your event using JSON-formatted settings in the widgets constructor:

[code]<input id=""colorPicker" />
<script type="text/javascript">
function onColorChange(e) { alert('Color Change!'); }
$(document).ready(function() {
     $("#colorPicker").kendoComboBox({
             dataSource: ["Blue", "Green", "Red", "Yellow"]
             change: onColorChange
      });
});
</script>
[/code]

If you use declarative initialization using data attribute you can wire up your event using data attribute for the event you are wiring up, here we are using "data-change" to represent the onChange event and its value responds to the function name i.e. the call back function.

[code]<input id="colorPicker" data-role="combobox"
 data-source='["Blue", "Green", "Red", "Yellow"]'
 data-change="onColorChange" />

<script type="text/javascript">
function onColorChange(e) { alert('Color Change!'); }

$(document).ready(function() {
    kendo.init($("#colorPicker"));
});
</script>
[/code]

There is also a third method to bind the event which does not depends on the way of initialization of the widgets, this works using a bind function with two parameters, the first parameter is a string which represents the event you are binding to i.e. in this case is change event and the second parameter being the call back function.

[code]<input id="colorPicker" data-role="combobox"
 data-source='["Blue", "Green", "Red", "Yellow"]' />

<script type="text/javascript">
function onColorChange(e) { alert('Color Change!'); }

$(document).ready(function() {
     kendo.init($("#colorPicker"));
});

var colorPick = $("#colorPicker");
colorPick.bind("change", onColorChange).data("kendoComboBox");
</script>
[/code]

Styling

Styling of widgets is the important part, to fit in with the theme of our web application. Kendo UI always a pair of style sheets.

  • kendo.common.css
    • Positioning and styling
  • kendo.[skin].css
    • Colors and backgrounds
    • Skin specific

Remember one thing always refer kendo.common.css file before skin css file because in some cases skin css may override the base css.

In Kendo UI different elements and different widgets use the same CSS classes to provide the level of abstraction and allow common styling, the Kendo documentation refers these shared CSS classes as primitives. To avoid the naming collision the kendo CSS classes have been prefixed with "k-" , primitives allow you to change style globally at a large level.

So, that was all about the web widgets of Kendo UI, we will look into the implementation of grid into detail in the next post. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

ShubhamSaxena
Software Developer Accenture
India India
I'm Software Engineer Associate at Accenture Services Pvt. Ltd. and I love Microsoft Technologies.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberSudhanshu Gupta13-Jun-13 19:31 
GeneralRe: My vote of 5 PinmemberShubhamSaxena13-Jun-13 19:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 14 Jun 2013
Article Copyright 2013 by ShubhamSaxena
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid