ASP.NET Core 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.
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; }
}
The default casing for JSON strings in ASP.NET Core is camelCase. The Telerik UI components that are data-bound depend on PascalCase formatted response from the server. If the JSON serialization isn't configured properly, the UI components will display wrong data. To find out how to configure the application to return the data in Pascal-case, refer to the JSON Serialization article.
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 HtmlHelper or TagHelper.
@(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
| Feature | Description |
|---|---|
| Data binding | You can bind the Grid to remote data or to local arrays of data. Additionally, you can use SignalR or configure your custom binding. |
| Editing | The Grid supports various editing modes that allow you to control the way the data is represented. |
| Filtering | To filter the displayed data, you can use row, checkbox, and menu filtering. |
| Grouping | The Grid provides built-in aggregates for a grand total row and column values. Additionally, you can use group paging to load groups on demand and page through the groups at the same time. |
| Paging | Use the built-in paging functionality to paginate the data. For optimal performance, perform the paging operations on the server. |
| Sorting | The single-, multi-, and mixed-sort modes allow you to address various sorting requirements. |
| Search panel | The Grid comes with a search panel out-of-the-box and allows the users to quickly find the needed data. |
| Export to Excel | The Grid enables you to export its content to Excel. |
| Export to PDF | You can use the built-in PDF export functionality. |
| Printing | If desired, you can print only the content of the Grid and ignore the rest of the page. |
| Column enhancements | The built-in Grid features like locked and sticky columns, column templates, multi-column headers, column resizing and reordering allow you to take complete control over the behavior of the columns. |
| State persistence | The Grid allows you to save the custom settings of the users and restore them after they log in again. |
| Hierarchy | The Grid provides options for visualizing the relations between parent and child records by displaying its table data in a hierarchical manner. |
| Templates | The abundance of templates allows you to customize the way the data is visualized in the table. |
| Scroll modes | The virtual scrolling and endless scrolling modes allow you to further enhance the user experience. |
| Selection | The selection functionality and its various options allow the users to quickly manipulate the desired data. |
| Toolbar | You can add command buttons to the toolbar and even define custom commands. |
| Rendering and styling | You can customize the appearance of the Grid by configuring its rows, initializing the Grid from a hidden container, using adaptive rendering, and setting its height and width. |
| Globalization | The Grid provides globalization through the combination of localization with internationalization and right-to-left support. |
| Accessibility | The Grid is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation. |