Post
Ask Question

Using Kendo UI Grid

Recently, I was working on an ASP.NET website. Then I would like to bind data to a grid on the client side. In .Net there are many resources to do that easily such as the jQuery UI, Kendo UI and so on. So I have tried looking at tutorials around the web. I show many solutions to bind a Kando UI or jQuery UI Grid with data. But I did not find a simple way as I am describing here. This article initially starts with downloading the Kendo UI.  As the article progresses it it explains how to bind a Kendo UI Grid in ASP.NET. One of the important concepts in this article is of when we bind the data with scrolling and selectable rows in Grid.

This article will explain how to bind a Kendo UI Grid in ASP.NET.

Now, let's see how to do that.

Downloading Kendo UI

In Solution Explorer, just right-click on the project and click on the Manage NuGet Packages.

Managing NuGet Package

Step 2: Search for Kendo in the wizard and install it.

Installing Telerik Kendo

Now the Kendo UI is installed in the application and you can find it in the Scripts folder.

Kendo UI File Structure

After downloading the Kendo UI, you will find that there are several files and folders available within the root folder. It will look such as the following:

Kendo UI File Structure

Working with Kendo UI

Now we add a HTML page and script file to the project. And drag the following Kendo files onto HTML Page. Then add a div tag to show the Grid. The HTML page looks like the following code.

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <link href="Content/kendo/2014.1.318/kendo.default.min.css" rel="stylesheet" />  
  6.     <link href="Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />  
  7.     <script src="Scripts/kendo/2014.1.318/jquery.min.js"></script>  
  8.     <script src="Scripts/kendo/2014.1.318/kendo.web.min.js"></script>  
  9.     <script src="Scripts/JavaScriptDemo.js"></script>  
  10. </head>  
  11. <body>  
  12.     <div id="grid">  
  13.     </div>  
  14. </body>  
  15. </html>  

Now open the Script file and add the following two references.

  1. /// <reference path="kendo/2014.1.318/jquery.min.js" />  
  2. /// <reference path="kendo/2014.1.318/kendo.web.min.js" />  

Now add the following code with Script file.

  1. /// <reference path="kendo/2014.1.318/jquery.min.js" />  
  2. /// <reference path="kendo/2014.1.318/kendo.web.min.js" />  
  3. $(document).ready((function () {  
  4.     var people =  
  5.         [{ Name: "Rohatash", LastName: "Kumar", Email: "[email protected]" },  
  6.             { Name: "Surendra", LastName: "Sorot", Email: "[email protected]" },  
  7.             { Name: "Prem", LastName: "Kumar", Email: "[email protected]" },  
  8.             { Name: "Rajeev", LastName: "Singh", Email: "[email protected]" }  
  9.         ];  
  10.     $("#grid").kendoGrid({  
  11.         dataSource: people,  
  12.     });  
  13. }));  

In the code above, we have created an array in which records are added manually. That data will be bound with a Kendo Grid using the Source property.

Now right-click on the HTML Page and click set as start page and run the application.

run

Now using the selectable Property. If  you set selectable to true then it will show the selected Grid Row. Now add the selectable property with the code above and run it.

  1. /// <reference path="kendo/2014.1.318/jquery.min.js" />  
  2. /// <reference path="kendo/2014.1.318/kendo.web.min.js" />  
  3. $(document).ready((function () {  
  4.     var people =  
  5.         [{ Name: "Rohatash", LastName: "Kumar", Email: "[email protected]" },  
  6.             { Name: "Surendra", LastName: "Sorot", Email: "[email protected]" },  
  7.             { Name: "Prem", LastName: "Kumar", Email: "[email protected]" },  
  8.             { Name: "Rajeev", LastName: "Singh", Email: "[email protected]" }  
  9.         ];  
  10.     $("#grid").kendoGrid({  
  11.         selectable: true,  
  12.         dataSource: people,  
  13.         //height: 100,  
  14.     });  
  15. }));

Output

selectable Property

Now to use the height Property. If you set the height to 100 then it will show the scrolling Grid Row. Now add the height Property with the code above and run it.

  1. $("#grid").kendoGrid({  
  2.         selectable: true,  
  3.         dataSource: people,  
  4.         height: 100,  
  5.     });  

height Property


Similar Articles