Kendo UI Grid local data source column sort by default

Question

Trying to set a default sort column on my kendo UI grid from a local datasource. I've read all over that I should be putting:

sort: { field: "price", dir: "desc" }

onto the data source. I've tried this and it still isn't working (see bottom of following example).

Here's my code in full, where am I going wrong?

$('#grid').kendoGrid({
                dataSource: [
                    {
                        date: "Feb 13 2014",
                        price: 5,
                    },
                    {
                        date: "Feb 15 2014",
                        price: 7,
                    },
                    {
                        date: "Feb 12 2014",
                        price: 6,
                    }
                ],
                height:500,
                sortable: true,
                pageable: false,
                columns: [
                    {
                        field: "date",
                        title: "Date"
                    },
                    {
                        field: "price",
                        title: "Price",
                    }
                ],
                sort: {field: "price", dir: "desc"}
            });

score 56 · Accepted Answer · answered Jul 02 '14 at 17:35

You are defining the sort line in the wrong place. You're putting it as one of the grid's properties, but it is (as you said) one of the datasource's property.

Put it as a child of the datasource property:

$('#grid').kendoGrid({
    dataSource: {
        data: [{
            date: "Feb 13 2014",
            price: 5,
        }, {
            date: "Feb 15 2014",
            price: 7,
        }, {
            date: "Feb 12 2014",
            price: 6,
        }],
        sort: {
            field: "price",
            dir: "desc"
        }
    },
    height: 500,
    sortable: true,
    pageable: false,
    columns: [{
        field: "date",
        title: "Date"
    }, {
        field: "price",
        title: "Price",
    }],
});

If it still doesn't work, I can provide a jsFiddle for you to work around with.

make sure you get the correct capitalization on the field name. If you use a model in asp.net core, LastName becomes lastName in javascript. — manit, Jan 27 '20 at 22:18

Iman · Answer 2 · 2018-08-21T10:06:23.337

5

if you are using Telerik MVC Control which is finally rendered to Kendo UI

.DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("City").Ascending()) // <-- initial sort expression
        .Read(read => read.Action("Index", "Home"))
    )

edited Aug 21 '18 at 10:06

answered Aug 17 '18 at 12:59

Iman

17,932
6
80
90

Note that the string inside Add (eg. City) was the name of the field the column is bound to – Matthew Nov 28 '18 at 02:11
1

Multiple sorting example https://stackoverflow.com/questions/31437920/sorting-kendo-grid-on-multiple-columns – Matthew Nov 28 '18 at 02:16

Kendo UI Grid local data source column sort by default

2 Answers2