Kendo UI : All about Web Widgets

By | June 12, 2013

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

    <input id="dateofBirth" />

    Here is an input field with the id of ‘dateofBirth’

  • Initialize

    <script type="text/javascript">
           $(document).ready (function () {
                    $("#dateofBirth").kendoDatePicker();
           });
    </script>
    

    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

    <input id="dateofBirth"  data-role="datepicker" />

    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

    <script type="text/javascript">
           $(document).ready (function () {
                    kendo.init($("#dateofBirth"));
           });
    </script>
    

    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
    $("dateofBirth).kendoDatePicker(
            {format: "yyyy/MM/dd"}
    );
    
  • Data Attributes
    <input id="dateofBirth"  data-role="datepicker"
     data-format="yyyy/MM/dd" />

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
    <br/><input id="colorPicker" />
    
    <script type="text/javascript">
    $(document).ready(function() {
         $("#colorPicker").kendoComboBox({
                 dataSource: ["Blue", "Green", "Red", "Yellow"]
          });
    });
    </script>
    
  • Data Source Configuration for Declarative Initialization

    <input id="colorPicker" data-role="combobox"
    data-source='["Blue", "Green", "Red", "Yellow"]' />
    
    <script type="text/javascript">
    $(document).ready(function() {
         kendo.init($("#colorPicker"));
    });
    </script>
    

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:

<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>

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.

<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>

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.

<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>

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.

One thought on “Kendo UI : All about Web Widgets

  1. Pingback: Kendo UI : Implementing a Grid Widget | Shubham Saxena | Innovation Escalator

Leave a Reply

Your email address will not be published. Required fields are marked *