Why pagination is not applied to grid when using common data source - kendo-ui

Question

I referred Kendo articles and did goggling ,But I couldn't found any solution.
step 1:
Is it possible that when we are using common data source and binding the whole data to chart and grid with pagination this is to happen when the page is loading.
step 2:
later on based on the filter condition applied on grid the data in chart should change.
Any help or suggest me whether it is possible or not..
var common = new kendo.data.DataSource({
type : "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderDate: { type: "date" }
}
}
}
});
common.read();
var grid = $("#grid").kendoGrid({
dataSource: common,
pageSize : 10,
pageable : {
refresh : true,
pageSizes: [10, 20]
},
filterable:true,
columns : [
{
field : "OrderID",
filterable: false
},
"Freight",
{
field : "OrderDate",
title : "Order Date",
width : 100,
format: "{0:MM/dd/yyyy}",
filterable: true
},
{
field: "ShipName",
title: "Ship Name",
width: 200,
filterable: true
},
{
field: "ShipCity",
title: "Ship City",
filterable: true
}
]
}).data("kendoGrid");
$("#chart").kendoChart({
dataSource : common,
autoBind : false,
categoryAxis: {
field: "OrderID"
},
legend : {
position: "right", visible: true
},
seriesDefaults: { type: "area" },
series : [
{ field: "OrderDate", name: "OrderDate" },
{ field: "Freight", name: "Freight" },
{ field: "ShipVia", name: "ShipVia" }
],
valueAxis : [
{
name : "OrderID",
max : 5.0,
min : 0,
labels : {
format: "{0}"
},
tooltip: { visible: true }
}
]
});
Here is fiddle up to now I have tested with : http://jsfiddle.net/D3rSk/189/

Answer 1

The grid doesn't have a pageSize option. You need to set the page size in the data source configuration:
var common = new kendo.data.DataSource({
pageSize : 10,
type : "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderDate: { type: "date" }
}
}
}
});
Here is the updated jsFiddle: http://jsfiddle.net/D3rSk/192/