http://dojo.telerik.com/izOFU
I'm trying to be a kendo right now. I found it very successful. In the above example I get the error "There are no items to view" when I turn the code below. Also, the page number is 0.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script></head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
data: {
"items" :[
{
"employee": "John Doe",
"team": "INFRASTRUCTURE"
},
{
"employee": "Jane Doe",
"team": "INFRASTRUCTURE"
}
]
},
schema: {
data: "items"
}
},
height: 540,
sortable: true,
reorderable: true,
groupable: {
messages: {
empty: "Gruplandırılacak Kolonları Buraya Sürükleyin."
}
},
resizable: true,
filterable: true,
columnMenu: true,
pageable: {
info: true,
previousNext: true,
numeric: true,
pageSize: 2,
messages: {
display: "Showing {0}-{1} from {2} data items",
itemsPerPage: "Kayıt Sayısı"
}
},
noRecords: {
template: "No data available on current page. Current page is: #=this.dataSource.page()#"
},
scrollable: {
endless: true
},
columns: [
{
field: "employee",
title: "Employee"
},
{ field: "team",
title: "Team",
}
]
})
</script>
</body>
</html>
1 Answer, 1 is accepted
The Grid needs to know the total number of items in order to calculate the number of pages to display in the pager. If the data is assigned directly as an array, the DataSource uses its length, but since the sample code uses an object with an items array, the schema.total should be set manually:
dataSource: { data: { "items" :[ { "employee": "John Doe", "team": "INFRASTRUCTURE" }, { "employee": "Jane Doe", "team": "INFRASTRUCTURE" } ] }, schema: { data: "items", total: function(data){ return data.items.length; } }}Here is the full working example:
http://dojo.telerik.com/@tsveti/oYUqOJIr
Let me know if you have additional questions about the Grid binding configuration.
Regards,
Tsvetina
Progress Telerik