Grid HtmlHelper Overview

The Telerik UI Grid HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Grid widget.

The Grid is a powerful control for displaying data in a tabular format. It provides options for executing data operations, such as paging, sorting, filtering, grouping, and editing, which determine the way the data is presented and manipulated. The Grid supports data binding to local and remote sets of data by using the Kendo UI for jQuery DataSource component.

Telerik UI for ASP.NET MVC Ninja image

The Grid is part of Telerik UI for ASP.NET MVC, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Advance Reading

Because of the numerous functionalities it supports, the Grid is the most complex of the Telerik UI HTML Helpers. To gain greater confidence before you start working with it, make sure you get familiar with the following concepts:

  • DataSource—The DataSource is one of the pivotal suite components. It is an abstraction for using local or remote data and a key concept in understanding how the Grid functions.
  • Remote CRUD operations—The section elaborates on scenarios in which data is retrieved from and submitted to a remote data service through HTTP requests that are made by the DataSource.
  • Remote data binding—The article provides information on server filtering, paging, and other features of the Grid.

Initializing the Grid

The following example demonstrates how to define the Grid by using the Grid HtmlHelper.

        .Columns(columns =>
            columns.Bound(c => c.ContactName).Width(140);
            columns.Bound(c => c.ContactTitle).Width(190);
            columns.Bound(c => c.CompanyName);
            columns.Bound(c => c.Country).Width(110);
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("Customers_Read", "Grid"))
    namespace Kendo.Mvc.Examples.Controllers
        public partial class GridController : BaseController
            public IActionResult Index()
                return View();

            public IActionResult Customers_Read([DataSourceRequest] DataSourceRequest request)
                return Json(GetCustomers().ToDataSourceResult(request));

            private static IEnumerable<CustomerViewModel> GetCustomers()
                using (var northwind = new SampleEntitiesDataContext())
                    return northwind.Customers.Select(customer => new CustomerViewModel
                        CustomerID = customer.CustomerID,
                        CompanyName = customer.CompanyName,
                        ContactName = customer.ContactName,
                        ContactTitle = customer.ContactTitle,
                        Address = customer.Address,
                        City = customer.City,
                        Region = customer.Region,
                        PostalCode = customer.PostalCode,
                        Country = customer.Country,
                        Phone = customer.Phone,
                        Fax = customer.Fax,
                        Bool = customer.Bool

Functionality and Features

For more information on implementing specific scenarios, refer to the Knowledge Base section.

Referencing Existing Instances

To refer to an existing Grid instance, use the method. Once a reference is established, use the Grid client-side API to control its behavior.

    $(function() {
        // The Name() of the Grid is used to get its client-side instance.
        var grid = $("#grid").data("kendoGrid");

See Also

In this article
Not finding the help you need? Improve this article