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:
- Add the complex model field that is corresponding for the ForeignKey column.
- 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
- ASP.NET MVC Grid Documentation
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums