This is a migrated thread and some comments may be shown as answers.

Cannot get sorting to work properly

3 Answers 183 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 10 Nov 2015, 02:16 PM

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

3 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 12 Nov 2015, 08:12 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Steven
Top achievements
Rank 1
answered on 16 Nov 2015, 07:25 PM
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.
0
Boyan Dimitrov
Telerik team
answered on 18 Nov 2015, 06:41 PM

Hello Steven,

 

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

 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Steven
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Steven
Top achievements
Rank 1
Share this question
or