Telerik’s HTML5 Kendo UI (Grid, Detail Template, TabStrip) with MVC3 and JSON

Update (4/13/2012): I’ve posted a continuation of this blog which includes server side sorting and filteration complete with solution download – Telerik’s HTML5 Kendo UI Grid with Server Side Paging, Sorting & Filtering with MVC3, EF4 & Dynamic LINQ.

After some relentless googling for for a complete example of using Telerik’s new HTML5 Kendo UI Grid and MVC3 with server-side paging, I realized there isn’t an example anywhere on how to implement this including the Kendo UI documentation on Telerik’s site. Reason being is Telerik is really trying to set a strong message that the Kendo UI suite of controls is not coupled to any backend technology, they are really just pure HTML5 controls, all wired up with jQuery that makes request to your choice of restful like services e.g. oAuth (yes, Kendo UI controls supports oAuth out of the box).

So in short they will run pretty much on any browser with mobile gestures built in. I’ve been working with DevExpress ASP.NET WebForms and MVC controls for the past few years and I must admit that their controls, as well as many other 3rd party server-side control suites including Telerik’s can make your application somewhat bulky.

I think this pure HTML5 and jQuery direction from Telerik is a great idea, giving you the power of nice lean controls without the large footprint and clunkiness that your traditional 3rd party server side controls carry and last but not least let's face it, the timing is perfect, everyone is coding client side apps with jQuery especially when using MVC!

I created an empty MVC3 application and wired everything up in the Home/Index.cshtml view, let’s take a look at what’s all required to get a basic Kendo UI Grid up and running.

Add your Javascript and CSS (optional) references


<link href="@Url.Content("~/Content/KendoUi/kendo.common.css")" rel="stylesheet"/>
<link href="@Url.Content("~/Content/KendoUi/kendo.default.css")" rel="stylesheet"/>
<script src="@Url.Content("~/Scripts/KendoUi/kendo.all.js")" type="text/javascript"></script>

Add your Kendo UI Grid jQuery code to instantiate, configure the Grid


<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                type: "json",
                serverPaging: true,
                pageSize: 5,
                transport: { read: { url: "Products/GetAll", dataType: "json"} },
                schema: { data: "Products", total: "TotalCount" }
            },
            height: 400,
            pageable: true,
            columns: [
                    { field: "ProductId", title: "ProductId" },
                    { field: "ProductType", title: "ProductType" },
                    { field: "Name", title: "Name" },
                    { field: "Created", title: "Created" }
                ],
            dataBound: function () {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            }
        });
    });

Note: the transport property is wired up to our MVC route: controller: ProductsController action: GetAll.

Now, let’s look at what the Grid is sending over the wire when requesting the payload for the Grid to bind by firing up an instance of Fiddler.

So from this we see that the Kendo Grid is making a GET request passing in parameters [take], [skip], [page], [pagesize]. Which now helps us frame up the controller, we now know that we have to provide a controller that accepts a GET request which takes in those parameters in order for us to do nice server side paging, meaning we will only ever return a max of 5 records for the current page you are viewing on the grid instead of returning all rows to the web server or in this case to the client browser and then do our paging processing there, minimizing the payload from our SQL box our web server. With that being said let’s wire up our ProductsController and while we are here, we will go ahead our implement our action for our detail grid which I will go over in just a bit.

Action for the master grid


        public JsonResult GetAll(int skip, int take, int page, int pageSize, string group)
        {
            var myDatabaseContext = new MyDatabaseContext();

            var products = myDatabaseContext.Products
                .OrderBy(p => p.Name)
                .Select(p => new ProductViewModel.Product
                                 {
                                     Completed = p.Completed,
                                     CompletedBy = p.CompletedBy,
                                     CreatedBy = p.CreatedBy,
                                     Name = p.Name,
                                     ProductId = p.ProductId,
                                     ProductType = p.ProductType.Name,
                                     ProductDetails = p.ProductDetails,
                                     Status = p.Status,
                                     Updated = p.Updated,
                                     UpdatedBy = p.UpdatedBy
                                 });

            return Json(
                new ProductViewModel
                    {
                        Products = products.Skip(skip).Take(take),
                        TotalCount = products.Count()
                    },
                JsonRequestBehavior.AllowGet);
        }

Note: I’m using EF 4.3 (which you can get with NuGet, this was chosen because of the super fast prototyping ability you get with EF’s CodeFirst approach, CodeFirst was actually introduced in 4.1, 4.3 has some extra cool Migration features), so if you download the sample app and you’re wondering why there isn’t an *.edmx file, thats why! :)

Action for the detail grid


        public JsonResult GetProductDetails(int skip, int take, int page, int pageSize, string group)
        {
            var myDatabaseContext = new MyDatabaseContext();

            var productDetails = myDatabaseContext.ProductDetails
                .OrderBy(p => p.ProducDetailtId);

            return Json(
                new ProductDetailsViewModel
                    {
                        ProductDetails = productDetails.Skip(skip).Take(take),
                        TotalCount = productDetails.Count()
                    },
                JsonRequestBehavior.AllowGet);
        }

Note: Rule of thumb, if you can’t accurately predict how many records will be returned in a service call that returns a collection, always implement pagination! You always want to have the smallest footprint in terms of payload going across the wire, whether it be the payload from your SQL box to your web server, or your web server to your browser or both.

You don’t want:

  • A non-performant app because of large payloads
  • Consumption of all the memory/cpu resources on your web box, for pagination processing on a large collection. Just think if your application is getting thousands of request and your web server is now responsible for pagination processing for all of them.
  • Consumption of all the memory/cpu resources on the client workstation on a large collection for pagination processing

So with that begin said perform pagination processing at the earliest stage, which is on your SQL box, apologize if I’m over emphasizing this, however, I’ve seen this bad practice implemented one to many times.

Notice, the [group] parameter in our action method above (which we are not using at the moment), if you enable server side grouping on the Kendo Grid, it will pass the field (column) that you chose to group on so that you can also perform server side grouping!

Let’s run the application

Great! We have the grid all wired up with server side paging in probably less than 10 minutes, all we had to do was paste in some jQuery configuration code, write an action that returns a list of products with skip and take which is trival with EF4 or pretty much anything that implements IQueryable.

Now let’s revisit wiring up the detail grid which is ProductDetails

Adding a Kendo template for the detail area


<script type="text/x-kendo-template" id="template">
    <br/>    
    <div class="tabstrip">
        <ul>
            <li class="k-state-active">Product Details</li>
        </ul>
    <div>
        <div class="productDetails"></div>
    </div>
    </div>
    <br/>
</script>

This is pretty much the Kendo practice, which is providing a template that the Kendo libraries can interpret and inject into other places, in our case it will read this template and inject it into the Detail area of our grid.

Note: I’m using another Kendo UI control which is the TabStrip control to display a tab,
not neccessary however looks great so I added it to our detail view. :)

Add the following (highlighted) to our original jQuery config for our master Grid


    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                type: "json",
                serverPaging: true,
                pageSize: 5,
                transport: { read: { url: "Products/GetAll", dataType: "json"} },
                schema: { data: "Products", total: "TotalCount" }
            },
            height: 400,
            pageable: true,
            columns: [
                    { field: "ProductId", title: "ProductId" },
                    { field: "ProductType", title: "ProductType" },
                    { field: "Name", title: "Name" },
                    { field: "Created", title: "Created" }
                ],
            detailTemplate: kendo.template($("#template").html()), 
            detailInit: detailInit,
            dataBound: function () {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            }
        });
    });


Note:

  • line 18: specify the Kendo template to use for the detail area
  • line 19: wiring up the detailInit event
  • line 20, 21: wiring up the dataBound event, simply expand the first rown after data is bound for the very first time

Implement the detailInit event


    function detailInit(e) {
        var detailRow = e.detailRow;
        detailRow.find(".tabstrip").kendoTabStrip();

        detailRow.find(".productDetails").kendoGrid({
            dataSource: {
                type: "json",
                serverPaging: true,
                pageSize: 5,
                transport: { read: { url: "Products/GetProductDetails", dataType: "json"} },
                schema: { data: "ProductDetails", total: "TotalCount" }
            },
            height:200,
            columns: [
                { field: "Key", title: "Key" },
                { field: "Value", title: "Value" }
            ]
        });


Note:

  • line 3: inject the Kendo UI TabStrip in the div with Id: tabstrip from our kendo template that we used as our detailTemplate earlier
  • line 10: set service call to controller: ProductsConroller, action: GetProductDetails
  • line 11: map our properties from our entity to properties Kendo Grid, e.g. the Grid expects that your collection is mapped to [data] and that your total record count for that request is mapped to [total]

Notice that in the transport property we are setting the url to the MVC route: controller: Products action: GetProductDetails. Now with that being said we are only getting the precise payload and also retrieving it only on demand or lazy loading if and only if when the user clicks on a particular row to see the details of that row. This is very nice and lean request, not the typical behaivor you get when implementing a traditional ASP.NET WebForms 3rd party control where you have to load and instantiate the entire control tree, rebind almost every parent that leads up to the detail control, so if you haven’t already made the leap to ASP.NET MVC, you better start!

Let’s run the app and see the detail grid in action

There are plenty of resources on the all the configurations you can do on the client side for the Kendo UI Grid, however what I mentioned earier is that there is a lack of any artifacts on how to wire things up on the server side in our case which was MVC3.

Here are a couple of links if your interested in more of the client side configuration including events and API for the Kendo UI Grid.

Happy coding…! :)
About these ads

19 thoughts on “Telerik’s HTML5 Kendo UI (Grid, Detail Template, TabStrip) with MVC3 and JSON

  1. Hello LE,
    I have a question , did you try to implement CRUD operations on the detail grid , and if you have an example for that ?

  2. Thanks, for the informative post

    I was wondering how to pass my custom parameters to the serverside from the javascript datasource and in that case what the serverside method signature should look like.

    What I mean is:

    // How to pass parameters here
    transport: { read: { url: “Products/GetAll”, dataType: “json”} }

    and

    // What should the method signature be for the action method when additional parameters are passed from javascript?

    public JsonResult GetAll(int skip, int take, int page, int pageSize, string group)

    Thanks

  3. I am a beginner working on Kendo Grid. I wanted to load the data on demand in the grid, like :

    I set the page size to 50, when a user scrolls down to 50 rows, the grid should retrieve next 50 rows from database and display it on demand.
    To do this, I changed “scrollable: true” to “scrollable: {virtual: true}”. But this disables scrolling in the grid.

    I am stuck, let me know if know any solution for it.

  4. Hi, I have Grid with two or more pages. Now i am updating second page grid value. I want entire grid values with updating value. here i am getting which page your updating that page values only it is taking by using $(‘#SampleGrid’).data(“kendoGrid”)._data; Is there any way to get the all grid values with updated grid column value.

    • Hi rangareddyavula, not quite sure I understand your question, could you elaborate a bit more on what your trying to do?

  5. Have you ever considered writing an ebook or guest authoring
    on other websites? I have a blog centered on the same information you discuss and would love
    to have you share some stories/information. I know my subscribers would value your work.

    If you’re even remotely interested, feel free to shoot me an e mail.

  6. Greetings from Los angeles! I’m bored at work so I decided to browse your site on my iphone during lunch break. I enjoy the information you provide here and can’t wait to take a
    look when I get home. I’m surprised at how fast your blog loaded on my phone .. I’m not even using WIFI, just 3G .
    . Anyhow, great site!

  7. You are so cool! I don’t think I have read through something like that before. So great to find another person with a few genuine thoughts on this subject. Really.. thanks for starting this up. This web site is one thing that is required on the web, someone with some originality!

  8. Thanks so much for this mate. It’s still proving difficult to find stuff on this.

    From what I can see kendo doesn’t support mvc4/webapi yet.

    Thnx again!

  9. Pingback: Telerik’s HTML5 Kendo UI Grid with Server Side Paging, Sorting & Filtering with MVC3, EF4 & Dynamic LINQ « Long Le's Blog

    • Hmm, it shouldn’t be that diffferent since the Kendo UI Grid is really just a pure HTML5 control written on top of jQuery, what are you getting stuck on?

  10. Wow! Thanks so much for going through this step-by-step. I’m about to start combining MVC and Kendo and, like you found, there are precious few examples. Great job!

    -Arnold

Please Leave a Reply or Tweet me @LeLong37...!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s