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.

Basic Configuration

This runnable demo demonstrates how to define a Grid by using the Grid HtmlHelper.

Functionality and Features

Events

You can subscribe to all Grid events. For a complete example on basic Grid events, refer to the demo on using the events of the Grid.

Handling by Handler Name

The following example demonstrates how to subscribe to events by a handler name.

    <%: 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>

Handling by Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

@(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>)
      )
)

Referencing Existing Instances

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

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

See Also

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