Enabling Grid Operations for a Grid Object Column

Environment

Product

Grid for Progress® Telerik® UI for ASP.NET Core

Description

How can I enable sorting, filtering, and grouping for a column which holds complex object values by using the Grid HtmlHelper in Telerik UI for ASP.NET Core?

Solution

• Enable the sorting, grouping, and filtering through the .Sortable(), .Groupable(), and .Filterable() methods.
• The Product Model has a Category property, which is a Model with CategoryID and CategoryName properties. Bind the column to the CategoryName property.

Razor

@model ProjectName.Models

@(Html.Kendo().Grid<Product>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(product => product.ProductID);
        columns.Bound(product => product.Category.CategoryName);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Groupable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read", "Grid"))
    )
)

Models

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class Product
{
    public int ProductID  { get; set; }
    public Category Category { get; set; }
}

public class Category
{
    public int CategoryID { get; set; }

    public string CategoryName { get; set; }
}

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ProjectName.Models;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;

public class GridController : Controller
{
        private static ICollection<Product> products;

        public GridController()
        {
            if (products == null)
            {
                var random = new Random();
                products = Enumerable.Range(1, 100).Select(x => new Product
                {
                    ProductID = x,
                    Category = new Category
                    {
                        CategoryID = x,
                        CategoryName = "Category" + x
                    }

                }).ToList();
            }
        }
        public ActionResult GridController()
        {
            return View();
        }

        public ActionResult Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(products.ToDataSourceResult(request));
        }
    }

For the complete implementation on how to enable sorting, filtering, and grouping in a Kendo UI Grid for ASP.NET Core when a Grid column represents complex object values, refer to this GitHub project demonstrates how to.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base