Using KendoUI with Sitefinity – Part 2 – Kendo Menu

In a previous post we outlined how to use KendoUI JavaScript Framework with Sitefinity. We defined our base class to utilize for the the coming KendoUI Sitefinity widgets. We also implemented the Kendo Panel Bar and showcased how to bind it to our Sitefinity content using server-side code.

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:

public class KendoUIThemeManager : UserControl
{
    #region Constants and Fields
 
    private const string CSS_DEFAULT_URL = "~/Widgets/Kendo/Resources/Stylesheets/kendo.default.min.css";
    private const string CSS_T_URL = "~/Widgets/Kendo/Resources/Stylesheets/kendo.{0}.min.css";
 
    private string _theme = "default";
 
    #endregion
 
    #region Properties
 
    /// <summary>
    /// Gets or sets the name of the theme to be used for this instance
    /// </summary>
    public string Theme
    {
        get { return _theme; }
        set { _theme = value.ToLower(); }
    }
 
 
    #endregion
 
    #region Events
 
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
 
        Utils.AddCssLink(Theme != "default" ? string.Format(CSS_T_URL, Theme) : CSS_DEFAULT_URL);
    }
 
    #endregion
}

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.

As most of you probably know, “the Menu displays hierarchical data as a multi-level menu. It provides rich styling for unordered lists of items, and can be used for both navigation and executing JavaScript commands. Items can be defined and initialized from HTML, or the API can be used to add and remove items.”

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 that we have the HTML properly generated, the BuildScript method handles the JavaScript generation

private string BuildScript()
{
    var stringBuilder = new StringBuilder();
 
    stringBuilder.Append("$(function() {");
    stringBuilder.Append(string.Format("$('#{0}').kendoMenu(", ControlId));
    stringBuilder.Append("{");
 
    stringBuilder.Append(string.Format("orientation: '{0}',", Orientation));
    stringBuilder.Append(string.Format("direction: '{0}',", Direction));
    stringBuilder.Append(string.Format("hoverDelay: {0},", HoverDelay));
    stringBuilder.Append(string.Format("closeOnClick: {0}, ", CloseOnClick.ToString(CultureInfo.InvariantCulture).ToLower()));
    stringBuilder.Append(string.Format("openOnClick: {0},", OpenOnClick.ToString(CultureInfo.InvariantCulture).ToLower()));
 
    stringBuilder.Append("}");
    stringBuilder.Append(");");
    stringBuilder.Append("});");
 
    var menuScript = stringBuilder.ToString();
 
    return menuScript;
}

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.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.