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:
#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:
- Some minimal HTML
- A jQuery selector
- 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:
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:
- When you want to override the default settings
- When a widget needs data
- 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:
text: “My Cool HTML5 Chart”
data: [500, 200, 350],
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:
- 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.
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.
Download the Kendo UI Beta