Kendo UI

  • Part 5 – Applying Styles and Themes to Kendo UI Widgets

    In today’s post I will help you to apply styles and themes provided by Kendo UI to the elements in your page. These styles and themes can be applied to not only the widgets but also to the native elements in the page too.

    Kendo UI comes with a number of predefined themes that can be applied to your page and to incorporate it in your page, you needs to include two css files in the head section.

    kendo.common.css – contains all the styles for positioning and widget dimensions

    kendo.{theme name}.css – contains the theme specific styles

    Note : The common.css file is mandatory, if you want your widgets to appear and function correctly.

    Let’s build a page with two text boxes, one hyperlink and a button and then we can apply the styles and themes in it.

        <div >
            <div >
                <div ><span><h3>Applying Styles and Themes for Kendo Widgets</h3></span></div>
            </div>
            <div >
                <div >
                    <div >Name</div>
                    <div><input type="text" id="txtName" /></div>
                </div>
            </div>
            <div >
                <div >
                    <div >Address</div>
                    <div ><input type="text"  id="txtAddress" /></div>
                </div>
            </div>
            <div >
                <div >
                    <div >&nbsp;</div>
                    <div >
                        <a href="#" >Clear</a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="button"  id="btnSubmit" value="Search" />
                    </div>
                </div>
            </div>
        </div>

  • Part 4 – Binding Events to Kendo UI Widgets

    Each widget available in Kendo UI exposes different events depending on the features available for each one of them. For example the DatePicker widget exposes events like open, change, close etc. Like in widget configuration, Kendo UI provides the ability to bind the events during the initialization phase itself as well as after the widget creation too.

    Binding Events

    First, we will see how we can bind events during the initialization phase.

    <div class="col-md-4"><input type="date" id="jQDatePicker" /></div>
    
    <div class="col-md-8"><span id="spResult"></span></div>
    <script type="text/javascript">
    
        $(document).ready(function () {
            $("#jQDatePicker").kendoDatePicker({
                start: "decade",
                format: "dd-MMM-yyyy",
                change: DatePickerOnChange
    
            });
        });
        function DatePickerOnChange() {
            var resSpan = $("#spResult");
            resSpan.append("Changed date<br>");
        }
        
    </script>

  • Part 3 – Setting Widget Properties

    So far in the series we have already seen how to incorporate Kendo UI in web pages and also how to initialize it. Please visit my last post to if you needs to recollect it. In this post I will be explaining how to set various options available for a widget.

    First, let’s see how we can set values for options while initializing the widget itself. I am going to use the DatePicker widget itself and will set the values for the start and format options of the widget. The start option specifies the start view when we click on the calendar icon in the textbox for the first time. Available options for the same is given below.


  • Part 2 - Getting started with Kendo UI

    In the last post I gave an introduction to Kendo UI about it’s features and advantages and also about the various bundles offered by them. In this post I will help you to get started with development using Kendo UI in your web applications.

    As I said in my earlier post, Kendo UI is built on top of jQuery, so it’s a pre-requisite to have jQuery in your application. The latest version of Kendo UI requires jQuery version 1.9.1 or higher and you can download it from their site or can use any of the CDN’s  which hosts jQuery. Please visit the link here to know more about the prerequisites.

    I will be using Kendo UI Core bundle which is a free offering from Telerik and can be downloaded from their site. To download you need to register an account with them and will be able to download the archive once you signed in to their site. The downloaded archive will contain folders as shown below.

    1

    Pic Courtesy – Telerik


  • Part 1 - Introduction to Kendo UI

    Kendo UI is a HTML 5 and JavaScript based framework from Telerik which helps you to create modern web applications for the web as well as for mobile devices. Built on top of jQuery, Kendo UI uses the power of HTML5 and CSS3 for rendering various types of widgets that can be used in our web pages as well as mobile applications for delivering rich, responsive content with minimum amount of development activity.

    It includes a lot of UI widgets, data visualization framework, mobile framework and tools such as MVVM Framework, data source templates, drag and drop components, themes etc. It supports most of the browsers available today and there by providing cross platform/cross browser support for your application. Gone are the days when you put in browser specific codes in your pages to make it browser compatible, with Kendo UI you need to concentrate on your functionality of the application and all tricky situations like this will be handled automatically by Kendo itself.