Kendo Grid auto resize by number of rows - kendo-ui

Question

How can I display fixed number of rows in kendo grid regardless of window size change?
I need to display 10 rows regardless of window resizes.
In order to do this, I need to re-calculate the number of rows and display 10 rows only back inside the grid. My requirement is to calculate the rows to display correctly in the grid. (in fact, I have search on internet and seems can't find any examples/articles, if you have any please share with me too ). My current solution has no error in my opinion, but still incorrect??? . Can someone help me find errors and correct me? Moreover if I insert some items above grid, the wrapper and data items(grid) becomes incorrect totally.
I need some insight and/or code-examples on this matter.
Much appreciated for the help.
My current codes for the resizing grid is as follow:
function resizeGrid() {
var gridElement = $("#grid"),
dataArea = gridElement.find(".k-grid-content"),
gridHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function(){
otherElementsHeight += $(this).outerHeight();
});
dataArea.height(gridHeight - otherElementsHeight);
}
function resizeWrapper() {
$("#outerWrapper").height($('#body').innerHeight());
}
and call the functions of both of them:
$(window).resize(function() {
resizeWrapper();
resizeGrid();
});
This is my datasource and schema:
$(document).ready(function() {
$(window).trigger("resize");
$("#grid").kendoGrid({
dataSource: {
data: [
{ userId: 11111, No: 1, isActive:true, date: new Date('12/12/2005 12:30 AM'), from: 'A', sm: 'testing', art: 'Shipped on', due: new Date('12/19/2005 11:30 PM')},
{ userId: 22340, No: 2, isActive:true, date: new Date('12/12/2005 12:30 AM'), from: 'A', sm: 'test0', art: 'Shipped on', due: new Date('12/19/2005 11:30 PM')},
.....
],
schema: {
model: {
fields: {
userId: { editable: true },
date: { filterable: { ui: "datetimepicker"}},
isActive:false,
No: { editable: true }
}
}
},
pageSize: 10
},
sortable: true,
reorderable: true,
scrollable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: 'No' ,width: 50 },
{ field: 'userId', title: 'ID', template:"<span class=ul>#=userId#</span> </br> <span class='pie'>1/5</span>", width:60 } ,
{ field: "isActive",
headerTemplate: '!',
template: '<span class="k-icon k-i-circle Unicode: e308" style="color: green; font-size: 28px;"></span> </br> <div class="div1"></div>', filterable:false , width: 40 },
......
]
});
});
Here is my kendo link: http://dojo.telerik.com/aviQU/6

Answer 1

Why not tell the grid to use a page size of 10? No need to recalculate sizes.
Set the data source's page size when you configure the grid.
Or are you setting (CSS/JS) the height of the grid somewhere that is causing it to resize?