Getting Started

Grid

The Grid HtmlHelper extension is a server-side wrapper for the Kendo UI Grid widget. It allows you to configure the Kendo UI grid from server-side code, helps with data binding and editing.

Introduction

Kendo UI Grid for ASP.NET MVC supports two ways of data-binding:

server- the widget makes HTTP GET requests when binding
ajax- the widget will make ajax requests when binding

Here are some of the differences between server and ajax bound modes:

Templates
- In server-bound mode the grid templates use server-side expressions and .NET code (C# or Visual Basic). Templates are executed server-side.
- In ajax-bound mode the grid uses Kendo UI Templates. Templates are executed client-side and use JavaScript.
Full page updates
- In server-bound mode the grid makes HTTP get requests to ASP.NET MVC action methods which cause a full page refresh.
- In ajax-bound mode the grid makes ajax requests which cause partial page update. The grid retrieves only the data needed for the current page.

Getting started

The following tutorial shows how to configure Kendo UI Grid for ASP.NET MVC to do server binding to the Northwind database (the Products table).

Create a new ASP.NET MVC 4 application (or Kendo UI ASP.NET MVC application if you have installed the Kendo UI Visual Studio Extensions). Name the application "KendoGridServerBinding". If you decided not to use the Kendo UI Visual Studio Extensions followe the steps from the introduction help topic in order to add Kendo UI Complete for ASP.NET MVC to the application.
Add a new "Entity Framework Data Model". Right click the ~/Models folder in the solution explorer and pick "Add new item". Choose "Data->ADO.NET Entity Data Model" in the "Add New Item" dialog. Name the model "Northwind.edmx" and click "Next". This will start the "Entity Data Model Wizard".
Pick the "Generate from database" option and click "Next". Configure a connection to the Northwind database. Click "Next".
Choose the "Products" table from the "Which database objects do you want to include in your model?". Leave all other options as they are set by default. Click "Finish".

Open "HomeController.cs" and modify the Index action method:

public ActionResult Index()
{
    ViewBag.Message = "Welcome to ASP.NET MVC!";
    var northwind = new NorthwindEntities();
    // Get the Products entities and add them in the ViewBag
    ViewBag.Products = northwind.Products;
    return View();
}

Add a Kendo UI Grid to the Index view

Index.aspx (ASPX)

<%: Html.Kendo().Grid((IEnumerable<KendoGridServerBinding.Models.Product>)ViewBag.Products) //Bind the grid to ViewBag.Products
        .Name("grid")
        .Columns(columns =>
        {
            // Create a column bound to the ProductID property
            columns.Bound(product => product.ProductID);
            // Create a column bound to the ProductName property
            columns.Bound(product => product.ProductName);
            // Create a column bound to the UnitsInStock property
            columns.Bound(product => product.UnitsInStock);
        })
        .Pageable() // Enable paging
        .Sortable() // Enable sorting
%>

Index.cshtml (Razor)

@(Html.Kendo().Grid((IEnumerable<KendoGridServerBinding.Models.Product>)ViewBag.Products) //Bind the grid to ViewBag.Products
      .Name("grid")
      .Columns(columns =>
      {
          // Create a column bound to the ProductID property
          columns.Bound(product => product.ProductID);
          // Create a column bound to the ProductName property
          columns.Bound(product => product.ProductName);
          // Create a column bound to the UnitsInStock property
          columns.Bound(product => product.UnitsInStock);
      })
      .Pageable() // Enable paging
      .Sortable() // Enable sorting
)

Build and run the application

To get a reference to a grid instance use the jQuery.data() method and the value specified via the Name() method. Then you can use you can use the JavaScript API of the grid.

Example - get reference to a Kendo UI Grid instance

@(Html.Kendo().Grid((IEnumerable<KendoGridServerBinding.Models.Product>)ViewBag.Products)
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(product => product.ProductID);
          columns.Bound(product => product.ProductName);
          columns.Bound(product => product.UnitsInStock);
      })
)
<script>
$(function() {
    // Notice that the Name() of the grid is used to get its client-side instance
    var grid = $("#grid").data("kendoGrid");
});
</script>

Handling Kendo UI Grid events

You can subscribe to all events exposed by the widget:

<%: Html.Kendo().Grid(Model)
        .Name("grid")
        .Events(e => e
            .DataBound("grid_dataBound")
            .Change("grid_change")
        )
%>
<script>
function grid_dataBound() {
    //Handle the dataBound event
}

function grid_change() {
    //Handle the change event
}
</script>

@(Html.Kendo().Grid(Model)
      .Name("grid")
      .Events(e => e
          .DataBound("grid_dataBound")
          .Change("grid_change")
      )
)
<script>
function grid_dataBound() {
    //Handle the dataBound event
}

function grid_change() {
    //Handle the change event
}
</script>

@(Html.Kendo().Grid(Model)
      .Name("grid")
      .Events(e => e
          .DataBound(@<text>
              function() {
                  //Handle the dataBound event inline
              }
          </text>)
          .Change(@<text>
              function() {
                  //Handle the change event inline
              }
          </text>)
      )
)

Kendo UI Docs