Adding On Row Click to the KendoUI Grid

The Problem

I’ve been going through the KendoUI Web collection (http://www.kendoui.com/) and I have to say it’s a very nice set of tools. Telerik really does put out good products.

However when I got to the grid I found a basic functionality severely missing. I want to be able to click on a row and get an on click event that has the primary key of the row exposed to it.

The Setup

I’m doing this in ASP.NET MVC so I’m going to set up an action to give me some data.  Below is some code you can place in a controller.

Controller

public class MyThing
{
    public int id;
    public string Name { get; set; }
    public string ReasonToExist { get; set; }
}

public JsonResult GetThings()
{
    var collection = new List<MyThing>();
    for (int i = 0; i < 10; i++)
    {
        collection.Add(new MyThing{id = i, Name = "Thing :" + i, 
            ReasonToExist = "To Count To :" + i});
    }

    return Json(collection, JsonRequestBehavior.AllowGet);
}

Now we want to create an Index page with a basic kendo grid on it. So that would look something like this: 

Index

<link rel="stylesheet" type="text/css" 
  href="http://www.codeproject.com/kendoui.web.2012.2.710.commercial/styles/kendo.common.min.css" />
<link rel="stylesheet" type="text/css" 
  href="http://www.codeproject.com/kendoui.web.2012.2.710.commercial/styles/kendo.default.min.css" />
<script type="text/javascript" 
  src="http://www.codeproject.com/Scripts/jquery-1.6.2.js"></script>
<script type="text/javascript" 
  src="http://www.codeproject.com/kendoui.web.2012.2.710.commercial/js/kendo.core.min.js"></script>
<script type="text/javascript" 
  src="http://www.codeproject.com/kendoui.web.2012.2.710.commercial/js/kendo.web.min.js"></script>

<script type="text/javascript">
    $(function () {
        var gridDataSource = new kendo.data.DataSource({
            transport: {
                read: '/home/GetThings'
            },
            pageSize: 5
        });

        var grid = $("#kGrid").kendoGrid({
            dataSource: gridDataSource,
            selectable: 'row',
            columns: [
                { field: "id" },
                { field: "Name" },
                { field: "ReasonToExist" }
            ]
        });
    });
</script>

<div id="kGrid"></div>

OK, so now we have this:

Now we need to add the ability to fire an event when the row is clicked and to pass the row’s primary key to it. Why this doesn't come out of the box I can’t say. But I digress.

Index

var grid = $("#kGrid").kendoGrid({
    ...
    change: function (arg) {
        var selected = $.map(this.select(), function (item) {
            return $(item).find('td').first().text();
        });
        alert(selected);
    },
});

Ugly but it now knows the ID of the row 

So now the last step of my little hack is we now need to hide the first column.  This is much uglier than the last part, because the header and the body are actually two separate tables, and each contain a set of columns we have to hide.

Index

var grid = $("#kGrid").kendoGrid({
    ...
    dataBound: function (e) {
        //Hide The First Column (the primary Key )
        //Have to do this so you can then read it on the row select
        $(".k-grid .k-grid-header colgroup col").first().remove();
        $(".k-grid .k-grid-content colgroup col").first().remove();
        $(".k-grid thead th").first().hide();
        $(".k-grid-content tbody tr").each(function () {
            $(this).find('td').first().hide();
        });
    }
});

And now we have our finished product 

If you find this useful or see ways to improve please feel free to comment. You can also find some other great topics over at my blog at: http://www.sympletech.com. This utility can be found with many others here: https://github.com/sympletech/SympleLib.