Click here to login

If you don't have a registration, click here to register

Online course

Introduction to Kendo UI

The web site defines kendo UI as: "Kendo UI is an HTML5, jQuery-based framework for building modern web apps. The framework features more than a dozen UI components, a rich data vizualization framework, an auto-adaptive Mobile framework, and all of the tools needed for HTML5 app development, such as Data Binding, Templating, Drag-and-Drop API, and more." In this course we will explore kendo UI in details. We will talk about each widget and see how it works. We will start with the html part and initializing the widget. Once we get that up and running, we start experimenting with the properties and functions. For the events, we will log them to div under the widget to see what events are triggered and when.

  • Introduction

    • 2

      Calendar and AutoComplete

      In this lesson, we are continuing our discussion of Kendo UI. We wrapped up the calendar discussion by talking about the footer and how we can get a hold of the calendar variable so we can make changes to the calendar. Watch this video
  • Widget

    • 4

      Events in DatePicker

      In this lesson, we are continuing our discussion of the date picker control. Specifically, we will talk about some events we can raise during the interaction with the widget. Watch this video
    • 5


      In this lesson, we are continuing our discussion of Kendo UI by talking about the ComboBox. Watch this video
    • 7


      In this lesson, we will experiment with the DateTimePicker control. This is similar to the date picker we discussed previously. Watch this video
    • 8


      In this lesson, we will discuss the drop down list. With the ComboBox, we were able to type some text in addition to the ability to select an item. Watch this video
    • 9


      In this lesson, we will learn about the editor widget. This is a powerful control because it allows the user to type text and format it the way the user needs. Watch this video
    • 10


      In this lesson, we will learn about the menu. You know that you can create a menu with sub-menus and every sub-menu can have a menu of its own. Watch this video
    • 12


      In this lesson, we will discover the numeric textbox. As a developer, one of the most important items on your list is data validation. Watch this video
    • 13


      In this lesson, we will learn how to work with PanelBar. A PanelBar is like an Accordion in jQuery UI, but in this case you have more flexibility with the properties and events. Watch this video
    • 15


      In this case, we will discuss the slider. The slider provides the ability to select a value, but the range is controlled by the developer, which makes validating input unnecessary. Watch this video
    • 16

      Range Slider

      In this lesson, we will discuss the range slider. This is similar to the slider that we have recently discussed. However, and as the name implies, the range slider has a range of values to work with. Watch this video
    • 17


      In this video, we will discuss the splitter. With the splitter, we will get a dynamic layout where we can add panes that can be collapsed and resized. Watch this video
    • 19

      ContentUrls Property

      In this video, we will continue our discussion of tabstrip be exploring the other properties and functions we have available. First, we will create the unordered list to represent the actual tabs, but we will not create the divs for the contents Watch this video
    • 20


      In this video, we will discuss the time picker. We have seen this before when we talked about the date/time picker. Watch this video
  • TreeView

    • 21


      In this video, we will discuss the tree view. When we think about a tree view, the first thing that comes to mind is Windows Explorer. So we are talking about a tree of items. As we drill deeper, we can view more items. Watch this video
    • 23

      Drag and Drop Functionality

      On this final section on the tree view, we will handle the drag and drop functionality. By using the dragAndDrop property, we are able to drag items and drop them between the trees. Watch this video