Grid HtmlHelper Overview
The Telerik UI Grid HtmlHelper for ASP.NET Core 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.
The Grid is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 100+ 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.
@(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"))
)
)
namespace Kendo.Mvc.Examples.Controllers
{
public partial class GridController : BaseController
{
[Demo]
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
}).ToList();
}
}
}
}
Functionality and Features
- Data operations
- Export options
- Advanced implementations
- More settings
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 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>