New to Telerik UI for ASP.NET CoreStart a free 30-day trial

ASP.NET Core Grid Overview

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.

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

he 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 type field in the DataSource schema model of the Grid HtmlHelper or TagHelper.

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

FeatureDescription
Data bindingYou can bind the Grid to remote data or to local arrays of data. Additionally, you can use SignalR or configure your custom binding.
EditingThe Grid supports various editing modes that allow you to control the way the data is represented.
FilteringTo filter the displayed data, you can use row, checkbox, and menu filtering.
GroupingThe 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.
PagingUse the built-in paging functionality to paginate the data. For optimal performance, perform the paging operations on the server.
SortingThe single-, multi-, and mixed-sort modes allow you to address various sorting requirements.
Search panelThe Grid comes with a search panel out-of-the-box and allows the users to quickly find the needed data.
Export to ExcelThe Grid enables you to export its content to Excel.
Export to PDFYou can use the built-in PDF export functionality.
PrintingIf desired, you can print only the content of the Grid and ignore the rest of the page.
Column enhancementsThe 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 persistenceThe Grid allows you to save the custom settings of the users and restore them after they log in again.
HierarchyThe Grid provides options for visualizing the relations between parent and child records by displaying its table data in a hierarchical manner.
TemplatesThe abundance of templates allows you to customize the way the data is visualized in the table.
Scroll modesThe virtual scrolling and endless scrolling modes allow you to further enhance the user experience.
SelectionThe selection functionality and its various options allow the users to quickly manipulate the desired data.
ToolbarYou can add command buttons to the toolbar and even define custom commands.
Rendering and stylingYou 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.
GlobalizationThe Grid provides globalization through the combination of localization with internationalization and right-to-left support.
AccessibilityThe Grid is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.

Next Steps

See Also