Enabling ForeignKey Column Sorting by Text

Updated on Sep 16, 2026

Environment

Product	Progress Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2023.1.314 version

Description

How can I enable ForeignKey column sorting by text in the Telerik UI for ASP.NET Core Grid?

Solution

The following example demonstrates how to enable the sort-by-text functionality in a ForeignKey column by adding the text field in the Grid.

To achieve the desired scenario:

1. Add the complex model field that is corresponding for the ForeignKey column.
2. Subscribe to the document.ready() event after the Grid declaration, get a reference of the header for the ForeignKey column, and change the data-kendo-field attribute to point to the text field.

If the Grid uses deferred initialization, place the handler after the deferred scripts are rendered. This example uses ServerOperation(false), so the Grid sorts the returned data on the client by the text field.

C#

     public class ProductViewModel
     {
         public int ProductID
         {
             get;
             set;
         }

         public string ProductName
         {
             get;
             set;
         }

         public decimal UnitPrice
         {
             get;
             set;
         }

         public CategoryViewModel Category
         {
            get;
            set;
         } 

         public int? CategoryID { get; set; }
     }

Razor

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.ProductName);
                columns.Bound(p => p.CategoryID).ClientTemplate("#=calculateField(CategoryID)#").EditorTemplateName("CategoryNameEditor").Width(200);
                columns.Bound(p => p.UnitPrice).Format("{0:c}").Width(200);
                columns.Command(command => command.Destroy()).Width(150);
            })
            .ToolBar(toolBar =>
            {
                toolBar.Create();
                toolBar.Save();
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style = "height:540px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .PageSize(20)
                .ServerOperation(false)
                .Model(model =>
                {
                    model.Id(p => p.ProductID);
                    model.Field(p => p.ProductID).Editable(false);
                })
                .Read(read => read.Action("Products_Read", "Grid"))
                .Update(update => update.Action("Products_Update", "Grid"))
                .Create(create => create.Action("Products_Create", "Grid"))
                .Destroy(destroy => destroy.Action("Products_Destroy", "Grid"))
            )
    )

JS

   <script type="text/javascript">
        $(function () {
            var grid = $("#grid").data("kendoGrid"); // Get the Grid's reference.
            grid.thead.find("th[data-kendo-field='CategoryID']").attr("data-kendo-field", "Category.CategoryName");
        });
   </script>

Place the script in the same .cshtml view after the Grid markup, or in an @section Scripts that the layout renders after the view content. The Grid must be initialized before the handler runs.

For the complete implementation of the suggested approach, refer to the Telerik REPL example on enabling foreign key column sorting by text in the Grid.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid 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 REPL: Enable ForeignKey Column Sorting by Text
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base