You are right, once I changed container panel's layout to "fit", the grid height no longer affected by "items per page".
Now the grid has a fixed size, even with the "fit" layout. In order to auto resize the grid with the containing panel, I changed the onRezise handler as follows but it does not seem to make any difference. any ideas why?
onResize template method appears to never be called. The actual resize event gets called though, strangely enough. Perhaps it has a different purpose I am unaware of. You should be able to switch both onBoxReady and onResize with a single afterComponentLayout to solve your issue. All you need to do in it is refresh the grid. After playing with it, it does appear there is still some odd behavior with the paging when it causes a scroll bar. It appears to happen even in the demo on their page and it probably will require overriding a Kendo method since they don't have any good events to latch on to. I will look into it in the next few days. I need to get some sleep at the moment.
It might be worth noting that, with the original code, the grid cannot resize vertically when the conatining panel (with "fit" layout) resizes, but resizing horizontally works ok. I am wondering why, when there is no code to explicitly set the grid's width.
per your latest post, I switched to afterComponentLayout, and indeed the grid starts resizing vertically too, thanks for that. I also observed the anomaly when I change "item per page" from 5 to 10, causing vertical scrollbar to appear. It will shift the pagination bar upward, leaving a blank space at the bottom. This may be kendo's bug since their demo has the same issue.
A more notable anomaly is the grouping feature. If I drag "city" column to the grouping area, the column header and its data are not aligned. Also I noticed the data row can be expanded to a blank row.