I have Kendo MVC Grid on my page with multi column sorting enabled. But sorting on two specific fields is not working:
1. For a column with conditional formatting done through JavaScript
2. Column with ClientTemaplate.
Below is my code.
@(Html.Kendo().Grid<Info>()
.Name(
"Info"
)
.Columns(columns =>
{
columns.Bound(c => c.ColumnA).Width(
"4%"
).Title(
"A #"
).Sortable(
true
);
columns.Bound(c => c.ColumnB).Width(
"4%"
).Title(
"B #"
).Sortable(
true
);
columns.Bound(c => c.ColumnC).ClientTemplate(
"#=ColumnC.Name#"
).Sortable(
true
).Width(
"11%"
).Title(
"C"
);
})
.Editable(edit => edit.Mode(GridEditMode.InLine))
.Events(events => { events.Save(
"gridSave"
); })
.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
.DataSource(source => source
.Ajax()
.Sort(sort => sort.Add(
"ColumnA"
).Descending())
.ServerOperation(
false
)
.Model(model =>
{
model.Id(f => f.Id);
model.Field(f => f.ColumnA).Editable(
false
);
model.Field(f => f.ColumnB).Editable(
false
);
model.Field(f => f.ColumnC).DefaultValue(
new
ColumnC() { Id = 0 });
})
//other configuration removed
.Events(events => { events.RequestEnd(
"sourceReadComplete"
); })
)
)
Case 1: I am adding a css class based on a condition. Sorting is not working on this column. If I comment the code that is adding the class, then the sort works fine.
function
sourceReadComplete(e) {
var
grid = $(
"#Info"
).data(
"kendoGrid"
);
grid.one(
"dataBound"
,
function
() {
var
gridData = grid.dataSource.view();
for
(
var
i = 0; i < gridData.length; i++) {
//get the item uid
var
currentUid = gridData[i].uid;
//find the row based on the uid and the custom class
var
currentRow = grid.table.find(
"tr[data-uid='"
+ currentUid +
"']"
);
//if the record fits the condition
if
(gridData[i].Condition ==
true
) {
currentRow.find(
"td:first"
).addClass(
"followup"
)
}
}
});
}
Case 2: Sorting on Column C is not working. If I bind the column directly to ColumnC.Name then sorting works. But I cannot do that as I want a dropdown for this field in Edit mode.