Enabling ForeignKey Column Sorting by Text

Environment

Product	Progress Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC 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 MVC 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, get a reference of the header for the ForeignKey column, and change the data-field attribute to point to the text field.

Model.cs

     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; }
     }

Index.cshtml

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.ProductName);
                columns.Bound(p => p.CategoryName).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"))
            )
    )

Script.js

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

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 MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik REPL: Enable ForeignKey Column Sorting by Text
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base