Archive for category Telerik

How to access cells in Telerik Kendo Grid

Introduction:

In this article I am going to explain how to access the cells in Kendo Grid from Telerik.

Description:

Recently I have come across a requirement where I need to access the cells in a Kendo Grid and then based on a value change the color of the cell. The documentation in KendoUI site shows options to access the columns all together.  So I have come up my own custom implementation which I will be explaining below

Installation:

If you are new to KendoUI control and then wondering from where you will get the installer, then you can use the nugget installer. You can use the below command to install Kendo Controls.

PM> Install-Package KendoUICore

Once you execute above command you will see the below items added to your solution

Another option is to use the online CDN for the Kendo Controls

 <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css"
        rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css"
        rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

Solution:

To access the cells in Kendo Grid we will use the dataBound event. Here first we will loop through the datasource and then loop each items in datasource.

By design Kendo will assign an id (dataItem.uid) field to each row in KendoGrid, we will use this id to access each row in KendoGrid.

Then we can use the textContent property to get the value and based on that color the cell in gridview.

function OnDataBound() {
                //Get the datasource here
                var data = this._data;
                //Loop through each item
                for (var x = 0; x < data.length; x++) {
                    //Get the currently active item
                    var dataItem = data[x];
                    //Access table row basedon uid
                    var tr = $("#grid").find("[data-uid='" + dataItem.uid + "']");
                    //Access cell object
                    var cell = $("td:nth-child(1)", tr);
                    //Get the cell content here
                    //Check if the column values are 
                    if (cell[0].textContent == "Nige") {
                        //Assign the css style to cell
                        //You can hide the cell content using css here
                        cell.addClass("color");
                    }

                }
            }

Complete Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet"
        type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet"
        type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css"
        rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css"
        rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
    <script src="http://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>
    <script>
        // A $( document ).ready() block.
        $(document).ready(function () {
            var ds = {
                data: createRandomData(20),
                pageSize: 10,
                schema: {
                    model: {
                        fields: {
                            Id: { type: 'number' },
                            FirstName: { type: 'string' },
                            LastName: { type: 'string' },
                            City: { type: 'string' }
                        }
                    }
                }
            };

            var grid = $("#grid").kendoGrid({
                dataSource: ds,
                dataBound: OnDataBound,
                editable: false,
                pageable: true,
                columns:
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" },
        { field: "City", width: 200 }
    ]
            }).data("kendoGrid");

            function OnDataBound() {
                //Get the datasource here
                var data = this._data;
                //Loop through each item
                for (var x = 0; x < data.length; x++) {
                    //Get the currently active item
                    var dataItem = data[x];
                    //Access table row basedon uid
                    var tr = $("#grid").find("[data-uid='" + dataItem.uid + "']");
                    //Access cell object
                    var cell = $("td:nth-child(1)", tr);
                    //Get the cell content here
                    //Check if the column values are 
                    if (cell[0].textContent == "Nige") {
                        //Assign the css style to cell
                        //You can hide the cell content using css here
                        cell.addClass("color");
                    }
                }
            }
        });
    </script>
    <style>
        .color {
            background-color: green;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="grid">
        </div>
    </form>
</body>
</html>

Advertisements

, , ,

Leave a comment