Grid Overview
The Grid is part of Telerik UI for ASP.NET Core, 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 TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Grid widget. To add the component to your ASP.NET Core app, you can use either.
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"))
)
)
<kendo-grid name="grid">
<columns>
<column field="ContactName" width="140"></column>
<column field="ContactTitle" width="190"></column>
<column field="CompanyName"></column>
<column field="Country" width="110"></column>
</columns>
<datasource type="DataSourceTagHelperType.Ajax">
<transport>
<read url="@Url.Action("Customers_Read","Grid")"/>
</transport>
</datasource>
</kendo-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
typefield 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));
})
)
)
)
<kendo-grid name="grid" height="550">
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
<transport>
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" />
</transport>
<schema>
<model>
<fields>
<field name="OrderDate" type="Date"></field>
</fields>
</model>
</schema>
</datasource>
<groupable enabled="true" />
<sortable enabled="true" />
<filterable enabled="true" />
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
</pageable>
<columns>
<column field="OrderID" width="120" />
<column field="OrderDate" title="Order Date" format="{0:MM/dd/yyyy}" />
<column field="ShipName" title="Ship Name" width="300" />
<column field="ShipCity" title="Ship City" width="250" />
</columns>
</kendo-grid>
Functionality and Features
- Data operations
- Export options
- Advanced implementations
- More settings
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>
<kendo-grid name="grid" height="550" on-change="onChange" selectable="true">
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
<transport>
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" />
</transport>
</datasource>
<groupable enabled="true" />
<sortable enabled="true" />
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
</pageable>
<filterable enabled="true" />
<columns>
<column field="ContactName" title="Contact Name" width="240" />
<column field="ContactTitle" title="Contact Title" />
<column field="CompanyName" title="Company Name" />
<column field="Country" title="Country" width="150" />
</columns>
</kendo-grid>
<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>