Archive for June, 2015

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

How to implement a GridView in MVC

Introduction:

In this article I am going to explain how to implement a GridView in MVC.

Prerequisites:

We are going to use Grid.Mvc Jquery plugin to implement GridView in MVC. You can get more details of this control from here.

To use Grid.Mvc we have to first add the necessary Jquery files to solution. One easy option to do this is to use the Nugget package to add Grid.Mvc to your solution. You can use the below command

install-package Grid.Mvc

After successful installation you will be able to see the below messages.

You can also download the file and add it to your solution manually.

Implementation:

Here I am going to explain how to implement GridView in MVC without using the table approach.

Model:

First you need to create a class in the Model. In this example I have used the DatabaseFirst approach.

You can use the below steps to generate the class files

  • Right click on the Model folder
  • Select Add option
  • And then select the New Item option
  • Select the Net Entity Data Model option and Provide a name for it
  • In the Entity Data Model Wizard, Select EF Designer from database and click on Next

If you already have connection string configured then you can select that from the available list.

If you don’t have the connection string configured then use the New Connection option and create the connection

  • Expand the Tableoption and then select the tables which you want
  • Click on Finish
  • You will have necessary class files generated in your solution now

You can get more details about how to use DatabaseFirst approach from this link.

Controller:

Now we have the Model files created from database. Next step is to fetch the data from database and then pass it to the View from Controller. We will have a basic select in EF for this demo. You can modify it as per your need.

  public ViewResult Index()
        {
            //Create db context object here this is test record
            AdventureWorksDbContext dbContext = new AdventureWorksDbContext();
            //Get the value from database and then Pass it View
            var items = dbContext.Addresses.Take(10);
            return View(items.ToList());
        }

View:

In View you can use the below code to create GridView in MVC. This will generate a very basic GridView in MVC View

@model IEnumerable<MvcApplication1.Models.Address>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />
    <!-- Script Includes-->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"> </script>
</head>
<body>
    <div style="width:550px">
        @*Refer the GridView reference here*@
        @using GridMvc.Html
        @Html.Grid(Model).Columns(columns =>
           {
               //Put the column details here
               columns.Add(s => s.AddressID).SetWidth(110).Sortable(true);
               columns.Add(s => s.AddressLine1).Sortable(true).SetWidth(110);
               columns.Add(s => s.City).Sortable(true).SetWidth(110);
               columns.Add(s => s.ModifiedDate).Sortable(true).SetWidth(110);
           }).WithPaging(20)
    </div>
</body>
</html>

Demo

Here I have used very little options, Grid.Mvc plugin supports variety of options like CustomColumns, Button controls in column, Editing in Gridview. You can get more details of this control from here.

, , ,

Leave a comment