How to use multiple Kendo UI Grid MVC in single view page that has export facility using free version

Kendo UI for MVC is paid version and since i was exploring the free version of the Kendo UI grid in MVC. I figured out this code that grabs data from the controller and displays multiple grid in the view and can export data from both the grids to excel with desired file name.

To do this I am not going to show how you are going to grab the data from the database but i will only display the controller code and the view code...
... 1. First of all include the .js and .css file in _Layout.cshtml page

2. Controller code
        1. First thing is to reference DocumentFormat.OpenXml.Packaging you can install it via NuGet Packages (right click on your solution and select Manage NuGet Packages and search for DocumentFomat.OpenXML and install it.

2. Next thing to note is you must return the view else if you just return the data then it will only display json result on the screen

         3. Return json result for the data for two grids I have GetCars and GetOtherCars here in my code

       4. Now insert the code to render the excel file (full code is found in the full working project attached at the bottom of this blog post)

       5. Now in the View (Index.cshtml) insert two grids where you should note is disable odata and mention excel export (full code is found in the full working project attached at the bottom of this blog post)
                           //  type: "odata",

Download Full Source code to display multiple Kendo UI MVC Grid in same View page using free version of Kendo UI

Read more!

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!