Telerik blogs

While Kendo UI is much more than UI, user interface widgets are a big part of the Kendo UI beta. Kendo UI is a growing collection of more than 12 UI widgets that serve as the building blocks for constructing rich, JavaScript interfaces. Kendo UI includes the following widgets in the initial beta:

  • Grid
  • Chart
  • AutoComplete
  • ComboBox
  • DropDownList
  • Menu
  • PanelBar
  • Slider
  • Splitter
  • TabStrip
  • TreeView
  • Upload
  • Window

Each UI widget leverages the best of HTML5 and CSS3 when it makes sense, while still providing full functional compatibility for older browsers. The list of UI widgets that ship with Kendo UI will only continue to grow during and after the beta, but this first grouping delivers some big hitters.

Using Kendo UI

Since Kendo UI is built on top of jQuery, using the new UI widgets is very intuitive. We’ve designed the API to feel very comfortable and familiar for jQuery developers. For example, to use the new Kendo AutoComplete, first you’d write some vanilla HTML:

<input id=”myAutoComplete” />

Then, to initialize this HTML input and give it the Kendo functionality and styling, a single jQuery JavaScript line is required:

$(“#myAutoComplete”).kendoAutoComplete([“Apples”, “Oranges”, “Grapes”]);

That’s it. In this case, I’ve initialized an AutoComplete input and directly defined the data that will be used for the AutoComplete suggestions. As with all Kendo UI widgets, there are many ways to bind to data (including external, service-provided data), but we’ll cover that in more detail later.

Initializing Kendo UI Widgets

As you saw in the previous example, initializing a Kendo UI widget usually requires three simple things:

  1. Some minimal HTML
  2. A jQuery selector
  3. The appropriate Kendo UI API call

The required HTML is never complex. For input widgets, it’s usually a basic HTML <input> tag. For lists of items (the kind used to power Menus, TabStrips, PanelBars, and TreeViews), simple <ul> and <li> tags do the trick. For most other UI widgets, like Grid or Chart, a simple <div> will do.

The jQuery selector is familiar territory. Nothing special about this- the selector helps you quickly target the HTML elements that should get the Kendo UI treatment. This can be a single HTML element selected by ID, or more general selection using CSS class names or other valid selector syntax.

Once the HTML DOM object is in-hand, Kendo UI can do its “magic” (in other words, the hard work that you’d otherwise have to do by hand). All Kendo UI widgets follow the API convention of “kendoWidgetName” for initialization. So, by example:

  • .kendoGrid
  • .kendoChart
  • .kendoMenu
  • .kendoUpload

And so on. What comes next depends on the widget.

For most widgets, like Slider, RangeSlider, TreeView, Menu, or Upload, nothing additional is required. The default settings will be applied to the UI widget and you’ll be ready to go. For others, like Grid or Chart, where some data must be provided to initialize the widget, additional configuration will be needed.

Providing Additional Configuration Settings

There are a few cases where you will need to do more to configure a Kendo UI widget:

  1. When you want to override the default settings
  2. When a widget needs data
  3. When a complex widget (like Chart) needs additional config

In all cases, providing JSON-formatted settings to the widget constructor does the necessary configuration. The specific property names and configuration options for each widget can be found in the online demo documentation. Let’s see an example with the Kendo UI Chart:

$(“#myChart”).kendoChart({
 
            title: {
 
                        text: “My Cool HTML5 Chart”
 
            },
 
            series:
 
            [{
 
                        data: [500, 200, 350],
 
                        name: “Downloads”
 
            }],
 
            categoryAxis: {
 
                        categories: [“v1”, “v2”, “v3”]
 
            }
 
});

As you can see, we provide configuration for the Chart’s title, data series (including some inline data), and axis values in the “kendoChart” constructor. It’s formatted as JSON with named properties, so the order of the configuration elements doesn’t matter. There are additional configuration options, too, such as the series chart type, theme, and legend settings, but the general approach is the same. Again, you can find more complete documentation of the available configuration options in the online demos.

Styling Kendo UI Widgets

Now that you know how to initialize Kendo UI widgets (and you know that it’s super easy), the other area of interest is styling (also sometimes called “theming”). With the first beta, Kendo UI ships with 3 out-of-the-box themes. Each has been designed and tested for pixel perfection across browsers by our CSS masters, so you can be sure any theme you use will look right no matter where it’s displayed.

Changing themes requires only one step:

  1. Adding a reference to the desired theme CSS (I’m assuming you’ve already copied the theme assets to your project)

It’s that easy. It’s standard linking to a CSS resource. The Kendo UI widgets will automatically consume the theme you’ve referenced.

There is one exception in the beta, and that is the Kendo UI Chart. Since the Chart is rendered with SVG/VML, not all of its styling can be controlled by the external stylesheets. Instead, we simply need to set the “theme” property to the name of our configured CSS theme.

$(“#chart”).kendoChart({
 
            theme: “kendo”
 
});

Themes cannot be set on an individual widget by default. There are “scoping” techniques that make it possible to use multiple themes on the same page, but will save that technique for a future post.

Wrapping-up

There are tons of additional things to cover with Kendo UI, like data binding, touch support, and integration with other JavaScript libraries. But this should be enough to get started. Stay tuned to the Kendo Blog for more information about working with the Kendo UI Framework and Kendo UI widgets in the coming days and weeks.

Download the Kendo UI Beta


ToddAnglin_164
About the Author

Todd Anglin

Todd Anglin is Vice President of Product at Progress. Todd is responsible for leading the teams at Progress focused on NativeScript, a modern cross-platform solution for building native mobile apps with JavaScript. Todd is an author and frequent speaker on web and mobile app development. Follow Todd @toddanglin for his latest writings and industry insights.

Comments

Comments are disabled in preview mode.