Loading bar is not displayed in kendo UI grid while not setting default height

When i removed the default height of Kendo UI Grid to "Increase the height of kendo UI grid to full page to display all records of grid" I faced another problem.

The loading image in Kendo UI grid was not displaying and the grid initially collapsed. This created the impression that the Kendo UI Grid was not loading at all so there was a great chance that users were distracted from the page.

To fix this issue I figured out just place one css code mentioned below that sets the min height of the grid so the Kendo UI grid displays the loading bar and after the data is loaded everything is all good..

Css Code to set min height of the Kendo Ui Grid is as follows:
  .k-grid-content {
        /*For setting min height to see the loader so that user are not distracted if the grid is loading or not*/
    min-height: 200px;
}

Read more!

Increase the height of kendo UI grid to full page to display all records of grid

First of Kendo UI grid is set to fixed height and when you have enabled paging then say it will show 5,10,15 or All records when selecting on the drop down list.

When we select the number from the list and the records are more than the height of the grid then the records move inside the scroll bar which was not my option for the grid.

I wanted to display all the records without the scroll bar appearing and expand the grid to show all the records selected without the scroll bar. Say if i select "All" then the grid should expand vertically to full length of the page.

To achieve this you must do following for your grid
1. Remove the height of the grid
   _grid = $("#grid").kendoExcelGrid({
               // height: $(document).height()-100,
2. Since the grid should expand and contract based on the number of rows we don't need vertical scroll bar to do this use the following css:
#grid .k-grid-header
    {
      padding: 0 !important;
    }

    #grid .k-grid-content
    {
        /*don't show the disabled scollbar at the right to make grid look clean*/
        overflow-y: visible;
    }
Now you are able to expand Kendo UI grid vertically when you select all records

Read more!