In this post we are going to take a step further. First, we will illustrate how to employ the various themes that are available out-of-the-box with KendoUI and how to command the look and feel of the various KendoUI controls. Afterwords, we will create our first real Sitefinity widget.
KendoUI controls are styled using a CSS file that is loaded collectively with the common CSS file. The problem that this implies, is that all the controls on the page must share that single CSS file and cannot have their own Skin similar to the RadControls. Hence, I created the KendoUIThemeManager control to ease the task of styling the KendoUI elements. Once dropped unto a Sitefinity page, it will apply our theme of choice to all the relevant KendoUI controls.
The KendoUIThemeManager class looks something like:
with a simple control designer to make it user friendly:
Now that we’ve completed an important piece of the puzzle. Let’s put this control into work and see how it comports with another control that we are going to define which is the Kendo Menu.
Before I demonstrate the Kendo Menu, I would like to show up the ShadowNav widget which we created earlier here at Falafel since I expended some of the methods from that control. ShadowNav enables you to easily create and style your navigation controls. Whether used as a horizontal menu or a panel bar, the widget generates all necessary HTML from the SiteMap making it easy for you to customize the output using CSS and JQuery plugins. You can read more about or download the source code for ShadowNav here.
Now, let’s drop the Theme Manager together with the Kendo Menu on a blank Sitefinity page:
And the result looks awesome
To make the KendoMenu operational in a real world project, all we need is a user friendly control designer as follows
Et Voila ! Our KendoMenu control is working … In the next post, we will create yet another useful KendoUI widget for Sitefinity
You can download the source code from here.
Your insights will be highly appreciated.