New to Telerik UI for ASP.NET MVC? Download free 30-day trial

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.
     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; }
     }
    @(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 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

See Also

In this article