Cannot get sorting to work properly

[Steven]

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.});

[Boyan Dimitrov]

Hello Steven,

 

In order to enable the Grid sorting in the Kendo UI "Row template"  you need to set a data-field attribute to the rows in the header of the table. For example:

<th data-field="Name">Name</th>
<th data-field="Age">Age</th>
<th data-field="DateOfBirth">Date Of Birth</th>

There is a forum thread where you can find a very similar discussion

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Steven]

Hello, I added a data-field attribute to each <th> with the appropriate value, but that had no effect on sorting. The table still does not sort.

[Boyan Dimitrov]

Hello Steven,

 

Please find attached that implements the desired behavior and the sorting functionality works fine. 

 

Regards,
Boyan Dimitrov
Telerik