+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Using Kendo UI with Sitefinity User Controls

by Josh Morales

This week, Sitefinity partner Falafel Software has been exploring using Telerik's Kendo UI JavaScript platform within Sitefinity. Be sure to take a look at these articles for some of the background that not only inspired this article, but made it possible.

User Controls

Falafel developed a KendoUIControlBase class that inherits from SimpleView so that it can serve as a base class for the compiled controls they developed. My goal was to modify this so that it could be used with User Controls (.ascx files) instead. This way, it can be used in an Intra-Site Module such as the Testimonials Module from the Sitefinity SDK.

Kendo Base Class

I used the Falafel example, but modified it down to just include the css and js files for Kendo to keep this example simple. Here is the base class for the control; notice that the base class for this is UserControl so we can use it as the base for our web user control.

public class KendoUIControlBase : System.Web.UI.UserControl{
    #region Constants and Fields

    private const string CSS_COMMON_URL = "~/Widgets/Kendo/Resources/Stylesheets/kendo.common.min.css";
    private const string CSS_DEFAULT_URL = "~/Widgets/Kendo/Resources/Stylesheets/kendo.default.min.css";
    private const string KENDOUI_JS_ALL_MIN = "~/Widgets/Kendo/Resources/JavaScript/kendo.all.min.js";

    #endregion #region Overrides of UserControl


    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);

        Utils.AddCssLink(CSS_COMMON_URL);
        Utils.AddCssLink(CSS_DEFAULT_URL);

        Utils.AddJsLink("http://code.jquery.com/jquery-1.7.1.min.js", PagePlacement.Head, this, false);
        Utils.AddJsLink(KENDOUI_JS_ALL_MIN, PagePlacement.Head, this);
    }

    #endregion}

Admin Grid View

All we are going to do here is take the existing RadGrid for the list view and "Kendo-ize" it to the rendered HTML table. In order for this to work, we need to add the "data-field" attribute to each column.

To do this, we need to intercept the ItemBound event for the grid, and edit each cell in the header. The following code demonstrates this (notice we're also using the base class from before):

public partial class TestimonialsAdminView : KendoUIControlBase{
    TestimonialsContext context = TestimonialsContext.Get();

    public void Grid_ItemBound(object sender, GridItemEventArgs e)
    {
        if (e.Item.ItemType == GridItemType.Header)
        {
            var row = e.Item as GridHeaderItem;
            row["ID"].Attributes.Add("data-field", "Edit");
            row["Delete"].Attributes.Add("data-field", "Delete");
            row["Name"].Attributes.Add("data-field", "Name");
            row["Summary"].Attributes.Add("data-field", "Summary");
            row["Rating"].Attributes.Add("data-field", "Rating");
            row["DatePosted"].Attributes.Add("data-field", "DatePosted");
            row["Published"].Attributes.Add("data-field", "Published");
        }
    }

    // snipped...}

Be sure also that each column from the RadGrid has a UniqueName property that matches the index name from the code above.

Finally, call the Kendo startup script, using the ClientID for the grid, but also include the rgMasterTable css selector, since the ClientID refers to the wrapping div control that wraps the actual grid.

<script type="text/javascript"> $(function () {
        $('#<%= TestimonialsGrid.ClientID %> .rgMasterTable').kendoGrid({
            scrollable: false,
            pageable: true,
            dataSource: { pageSize: 10 },
            sortable: true });
    });
</script>

Now when we load our Testimonials list, Kendo fires up over the grid, instantly adding the snappy sorting and paging features it provides. As a test, I added 100 testimonial entries, and it works great.

Sitefinity-Kendo-RadGrid

What's Next

For this example, I didn't make use of any of Kendo's actual data methods for editing or deleting data. Those links are still the standard ones from the module that use either the Create/Edit form or a Postback.

However, this does demonstrate how you can immediately take advantage of Kendo to keep the snappy, ajax-like responsiveness of Sitefinity in your existing modules and controls. Take some time to experiment with how Kendo can help improve your Sitefinity user experience, and as always, be sure to share your experiences with us.

11 comments

Leave a comment
  1. Lino Tadros Mar 03, 2012
    Excellent work Josh as usual! Thanks for the mention
    Go Sitefinity!
  2. Larry M Mar 04, 2012
    Great to know how to take advantage of Kendo UI plugins in Sitefinity.. But I don't see the point....

    Why would anyone want to use Kendo UI in Sitefinity when it already has the support for much more powerful and mature RAD Controls...
  3. Steve Mar 04, 2012
    @Larry
      Kendo is jQuery based while the radcontrols are msAjax based, therefore kendo is WAY faster at client operations.  Also more futureproof since MS has decided to kill msajax.  It's also a huge pain in the ass having to access a radcontrol inside of $(document).ready as the controls client components might not yet be available since the come in pageLoad which often happens after (slower).
  4. Kristian Mar 05, 2012
    Don't forget that things like the kendo charts will display on mobile devices whereas the silverlight counterparts will not!
  5. Jens Lewald Mar 05, 2012
    Rad Controls inside Sitefinity are not Silverlight based.
    Only Analytics part and Image upload is Silverlight based
  6. Josh Mar 05, 2012
    @Larry, my best answer to this would be: options.

    In my personal experience, Sitefinity has always been about giving you the options to choose the path that works best for you and your website needs. Kendo UI is a powerful JS framework, and this simple example is really just a Proof of Concept.

    I am continuing to explore this (concurrently as I explore Kendo!) and hope to provide new examples that showcase what Kendo can do for Sitefinity.

    Thank you all for your feedback!
  7. Kristian Mar 06, 2012
    @Jens, for the backend sure, those are the only areas in the backend that use silverlight. However, you have the options to create controls using the rad controls for silverlight when you want something a little more interactive. For example: I find the KendoUI line chart to be much nicer compared to the silverlight one, or even the ajax one.
  8. Jens Lewald Mar 07, 2012
    @ Kristian

    I know it -and i love that we can use what we need for your development.
    We have full options to Telerik Controls. So based on our demand we can use what we need. By the way do you have test the Kendo ui real on all mobile devices ?
    The Kendo Mobile seems to be focused on webbased kit browsers. So then you only adress some of customers.

  9. Driggs Mar 10, 2012
    I'd be cautious, for display that grid rocked, but once I started doing some editing with it, I ran into a lot of issues. They may be fixed in their next quarterly release, but it's still a very young product.
  10. Chris Apr 05, 2012
    Why I cannot find Utils? :|
  11. Josh Apr 05, 2012
    Hi Chris, Utils is a helper method that was included in the original downloadable sample from Falafel's blog post, it's a helper method they developed to easily register css and js on a control, and not part of Sitefinity itself.

    Leave a comment