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"}
});
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.
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.
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.
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.
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.
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"))
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With