Click here to Skip to main content
Click here to Skip to main content

Tagged as

Adding On Row Click to the KendoUI Grid

, 3 Aug 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Using a little jQuery to add the ability to handle the on row clicked of the KendoUI Grid Control.

Editorial Note

This article appears in the Third Party Product Reviews section. Articles in this section are for the members only and must not be used by tool vendors to promote or advertise products in any way, shape or form. Please report any spam or advertising.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sympletech
Software Developer Sympletech
United States United States
No Biography provided
Follow on   Twitter

Comments and Discussions

 
QuestionGood article, but some of the ugliness is no longer required. PinmemberPikesville Paesano25-Nov-12 9:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150327.1 | Last Updated 3 Aug 2012
Article Copyright 2012 by Sympletech
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid