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

Solution 1

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.

Solution 2

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"))
    )

Comments

[Matthew]

Note that the string inside Add (eg. City) was the name of the field the column is bound to

[Matthew]

Multiple sorting example stackoverflow.com/questions/31437920/…

[Ahmad naser]

can you give me jsFiddle

[manit]

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.