title: Kendo Grid auto resize by number of rows
body: <p>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.</p>
  
  <p>I need some insight and/or code-examples on this matter.
  Much appreciated for the help.</p>
  
  <p>My current codes for the resizing grid is as follow: </p>
  
  <pre><code>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());
      }
  </code></pre>
  
  <p>and call the functions of both of them:</p>
  
  <pre><code>  $(window).resize(function() {
      resizeWrapper();
      resizeGrid();
    });
  </code></pre>
  
  <p>This is my datasource and schema:</p>
  
  <pre><code> $(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:"&lt;span class=ul&gt;#=userId#&lt;/span&gt; &lt;/br&gt; &lt;span class='pie'&gt;1/5&lt;/span&gt;", width:60 }      ,  
                    { field: "isActive", 
              headerTemplate: '!',
              template: '&lt;span class="k-icon k-i-circle Unicode: e308" style="color: green; font-size: 28px;"&gt;&lt;/span&gt; &lt;/br&gt; &lt;div class="div1"&gt;&lt;/div&gt;', filterable:false , width: 40  },
      ......              
      ]        
      });        
    });
  </code></pre>
  
  <p>Here is my kendo link: <a href="http://dojo.telerik.com/aviQU/6" rel="nofollow noreferrer">http://dojo.telerik.com/aviQU/6</a></p>