Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kendo UI Grid local data source column sort by default

Tags:

kendo-grid

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"}
            });
like image 595
jonnow Avatar asked Jul 01 '14 10:07

jonnow


People also ask

How do I sort a column in Kendo grid?

If set to true the user can click the column header and sort the grid by the column field when sorting is enabled. If set to false sorting will be disabled for this column. By default all columns are sortable if sorting is enabled via the sortable option.

How does Kendo grid sort date?

Custom javascript in kendo sortable attribute will do the trick. working fine do this part. { field: "ReinsDepositDate", format: "{0:MM/dd/yyyy}",type:"date", sortable:{ compare: function (a, b) { var c = new Date(a. ReinsDepositDate); var d = new Date(b.

What is selectable in kendo grid?

selectable Boolean|String|Object (default: false)If set to true the user would be able to select grid rows. By default selection is disabled. Can also be set to the following string values: "row" - the user can select a single row.

What is transport in kendo grid?

kendo:dataSource-transport-createThe configuration used when the data source saves newly created data items. Those are items added to the data source via the add or insert methods. If the value of transport. create is a function, the data source invokes that function instead of jQuery.


Video Answer


2 Answers

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.

like image 67
gitsitgo Avatar answered Oct 07 '22 23:10

gitsitgo


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"))
    )
like image 5
Iman Avatar answered Oct 08 '22 00:10

Iman