I am using Kendo UI MVC in a .NET application and have a grid where one of the columns is bound to an object property. The column should be filterable, editable, and sortable.
The column is bound to an object Category, which has two properties:
CategoryId
CategoryName
I want to display CategoryName in the UI and allow users to edit it using a ComboBox. When updated, I need to pass both the CategoryId and CategoryName back to the server.
Issue: Editing works as expected.
However, when I set .Filterable(true) and .Sortable(true), editing do not work.
I assume this happens because the column is bound to an object (Category), not a direct property like Category.CategoryName.
My Current Code: Editor Template (ComboBox):
@model CategoryViewModel
@(
Html.Kendo().ComboBoxFor(model => model)
.BindTo(ViewData["Categories"] as IEnumerable<CategoryViewModel>)
.DataValueField("CategoryId")
.DataTextField("CategoryName")
.NoDataTemplate("NoDataPlaceholder")
.Placeholder("CategoryPlaceholder")
)`
Grid Column Definition:
columns.Bound(p => p.Category)
.ColumnDefaultProperties()
.ClientTemplate("#= Category ? Category.CategoryName : '' #")
.EditorTemplateName("CategoryEditor")
.EditorViewData(new { Categories = Model.Categories })
.Editable("()=> false")
.Width(180)
.Filterable(true) // This causes the issue
.Sortable(true); // This also causes the issue
How can I make this column filterable, editable, and sortable while still binding to an object (Category) and ensuring both CategoryId and CategoryName are updated correctly?
Would I need to use a different binding approach or modify the way sorting/filtering works? Any suggestions or workarounds would be greatly appreciated.