I'm trying to sort a grid but it simply will not work no matter what I try. I'm using MVC but the JS version of Kendo UI. I've tried server sorting both on and off and several of the sorting options from the API, but it doesn't work. I use Chrome but I tried in IE, same problem, so I don't think it's a problem with stable sorting. Attempting to sort changes the order (not sorted, but it changes), then changing the sort direction after that has no effect at all. I'm using a row template, then applying the sort capability to it inside the grid initializer script.
What does my server need to return to fix sorting, or what am I doing wrong?
This is the row template:
01.
<
script
id
=
"rowTemplate"
type
=
"text/x-kendo-tmpl"
>
02.
<
tr
>
03.
<
td
class
=
"tdalign"
>
04.
<
a
href
=
"/Controller/Info/#:data.Id#"
>#:PONumber#</
a
>
05.
</
td
>
06.
<
td
class
=
"tdalign"
>
07.
#:Col1#
08.
</
td
>
09.
<
td
class
=
"tdalign"
>
10.
#:Col2#
11.
</
td
>
12.
<
td
class
=
"tdalign"
>
13.
#:Col3#
14.
</
td
>
15.
<
td
>
16.
<
span
class
=
"descUppercase"
>#:Col4#</
span
>
17.
</
td
>
18.
<
td
class
=
"tdalign"
>
19.
#:Col5#
20.
</
td
>
21.
<
td
class
=
"tdalign"
>
22.
#:Col6#
23.
</
td
>
24.
<
td
class
=
"tdalign"
>
25.
#:kendo.toString(kendo.parseDate(Col7), "MM/dd/yyyy")#
26.
</
td
>
27.
<
td
class
=
"tdalign"
>
28.
#:kendo.toString(kendo.parseDate(Col8), "MM/dd/yyyy")#
29.
</
td
>
30.
<
td
class
=
"tdalign"
>
31.
<
table
>
32.
<
tr
>
33.
<
td
class
=
"tdalign col8TD"
>
34.
<
button
type
=
"button"
id
=
"Col8#:Id#"
class
=
"buttonInit Col8Button #:Col8Class1#"
#:Col8Class2#>#:Col8#</
button
>
35.
</
td
>
36.
<
td
class
=
"tdalign Col9TD"
>
37.
<
button
type
=
"button"
id
=
"Col9button#:Id#"
class
=
"buttonInit Col9nButton #:Col9Class1#"
#:Col9Class2#>#:Col9#</
button
>
38.
</
td
>
39.
<
td
class
=
"tdalign Col10TD"
>
40.
<
button
type
=
"button"
id
=
"Col10#:Id#"
class
=
"buttonInit Col10Button #:Col10Class1#"
#:Col10Class2#>#:Col10#</
button
>
41.
</
td
>
42.
</
tr
>
43.
</
table
>
44.
</
td
>
45.
</
tr
>
46.
</
script
>
This is the initialization script:
01.
$(document).ready(
function
() {
02.
$(
"#grid"
).kendoGrid({
03.
dataSource: {
04.
type:
"json"
,
05.
transport: {
06.
read: {
07.
url:
"@Html.Raw(Url.Action("
List
", "
Controller
"))"
,
08.
type:
"POST"
,
09.
dataType:
"json"
10.
}
11.
},
12.
schema: {
13.
data:
"Data"
,
14.
total:
"Total"
,
15.
errors:
"Errors"
16.
},
17.
error:
function
(e) {
18.
display_kendoui_grid_error(e);
19.
},
20.
pageSize: @(defaultGridPageSize),
21.
serverPaging:
true
,
22.
serverSorting:
true
23.
},
24.
pageable: {
25.
pageSizes: [@(gridPageSizes)],
26.
info:
false
27.
},
28.
editable:
false
,
29.
scrollable:
false
,
30.
mobile:
true
,
31.
noRecords:
true
,
32.
resizable:
true
,
33.
sortable:
true
,
34.
excel: {
35.
allPages:
true
,
36.
fileName:
"Grid.xlsx"
,
37.
},
38.
rowTemplate: kendo.template($(
"#rowTemplate"
).html()),
39.
dataBound:
function
(e) {
40.
$(
".buttonInit"
).kendoButton();
41.
}
42.
});
43.
});