Grid Overview

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.

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.

Advance Reading

Because of the numerous functionalities it supports, the Grid is the most complex of the Telerik UI components. 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.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Customer>()
        .Name("grid")
        .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
            .Ajax()
            .Read(read => read.Action("Customers_Read", "Grid"))
        )
    )
    public class GridController : Controller
    {
        public ActionResult Customers_Read([DataSourceRequest] DataSourceRequest request)
        {
            var result = Enumerable.Range(0, 50).Select(i => new Customer
            {
                CompanyName = "Company Name " + i,
                ContactName = "Contact Name " + i,
                ContactTitle = "Contact Title " + i,
                Country = "Coutry " + i
            });

            var dsResult = result.ToDataSourceResult(request);
            return Json(dsResult);
        }
    }
    public class Customer
    {
        public string ContactName { get; set; }
        public string CompanyName { get; set; }
        public string Country { get; set; }
        public string ContactTitle { get; set; }
    }

Basic Configuration

The Grid configuration options are passed as attributes of the helper. The Grid uses the DataSource component to bind its data.

To parse the value to a proper data type, set a type field in the DataSource schema model of the Grid TagHelper or HtmlHelper.

    @(Html.Kendo().Grid<TelerikAspNetCoreApp4.Models.OrderViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.OrderID).Width(120);
            columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.ShipName).Width(300);
            columns.Bound(p => p.ShipCity).Width(250);
        })
        .Groupable()
        .Sortable()
        .Filterable()
        .Pageable(pageable => pageable
        .ButtonCount(5)
        .Refresh(true)
        .PageSizes(new[] { 5, 10, 20 }))
        .DataSource(dataSource => dataSource
            .Custom()
            .Transport(transport => transport
            .Read(read => read.Action("Orders_Read", "Grid")))
            .Schema(schema => schema
                .Data("Data")
                .Model(model => {
                    model.Field("OrderDate", typeof(DateTime));
                })
            )
        )
    )

Functionality and Features

Events

You can subscribe to all Grid events and then use them to further customize the behavior of the Grid.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ContactName).Title("Contact Name").Width(240).Filterable(ftb => ftb.Multi(true));
            columns.Bound(c => c.ContactTitle).Title("Contact Title");
            columns.Bound(c => c.CompanyName).Title("Company Name");
            columns.Bound(c => c.Country).Title("Country").Width(150);
        })
        .Groupable()
        .Events(events => events
            .Change("onChange")
        )
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Orders_Read", "Grid"))
            .PageSize(20)
        )
    )

    <script>
            function onChange(e) {
                var selectedRow = this.select();
                var dataItem = this.dataItem(selectedRow);
                console.log(dataItem)
            }
   </script>

Referencing Existing Instances

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

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

Learning Resources

See Also

In this article