Recent Posts

Friday, July 24, 2015

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

Related Posts by Categories




No comments:

Post a Comment