Post
Ask Question

Kendo Grid Print Using ASP.NET WEB API And Entity Framework

Before going through this article ensure that you have the basic knowledge of MVC Architecture and ASP.NET Web API.

Let us start with creating a REST service using WEB API.

Just create a WEB API project in Visual Studio as in the following figure 1 and 2:

new project
                                                      Figure 1: New Project 

select a template
                        Figure 2: Project Template

Creating a Model Class

Right-click on the model folder and create a class, in my case I named it Product.

Write the following code in the Product.cs model class:

  1. public class Product  
  2. {  
  3.     [Key]  
  4.     [DatabaseGenerated(DatabaseGeneratedOption.Identity)]  
  5.     public int ProductID  
  6.     {  
  7.         get;  
  8.         set;  
  9.     }  
  10.     [Required]  
  11.     public string ProductName  
  12.     {  
  13.         get;  
  14.         set;  
  15.     }  
  16.     [Required]  
  17.     public string UnitPrice  
  18.     {  
  19.         get;  
  20.         set;  
  21.     }  
  22. }  
Here I am using "Entity Framework Code First Technique", so we need to create the context class.

Right-click on the model folder and create one more class, in my case I named it ProductContext.

Write the following code in ProductContext class:
  1. public class ProductContext: DbContext  
  2. {  
  3.     public ProductContext(): base("name=TestConnection")  
  4.     {  
  5.     }  
  6.     public DbSet < Product > Products  
  7.     {  
  8.         get;  
  9.         set;  
  10.     }  
  11. }  
Scaffolding the WEB API Controller Class

Note : Before Scaffolding build your application once.

Right Click on Controller folder, then select add Controller and create a WEB API class as in the following figure 3 & 4.

add scaffold
                                                         Figure 3: Add scaffold


Add controller
                                                      Figure 4: Add controller 

The preceding procedure will scaffold the RESTful service in the ProductsController.cs.

You will get some pre-defined HTTP GET, POST, PUT and DELETE requests/responses in the products controller. Modify the code based on your application requirements. For this example I didn't modified the code.

Now the REST services are created, it's time to create a Kendo UI Grid to consume the services.

Before implementing the service in the Kendo UI check that in Postman / Fiddler.

body

I have already inserted some records in the Kendo Grid using HTTP POST service. For more details on how to insert a record in kendo grid using WEB API and Entity framework please click here.

Here is my SQL Table:

Sql Table

Creating a Kendo Grid with Remote Binding and Print Functionality

Create an HMTL page in your project, in my case I named it KendoPrint.html.

There are two ways to print the kendo grid:
  1. Print the existing web page, but use a print style sheet to hide parts of the page that are not needed.
  2. Retrieve the Grid HTML, inject it in a new browser window, and trigger printing of the new page.

I am going to work on the 2nd way.

Design in KendoPrint.html

  1. <html>  
  2.   
  3.     <head>  
  4.         <title></title>  
  5.         <meta charset="utf-8" />  
  6.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  7.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  8.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  9.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  10.         <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  11.         <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  12.         <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  13.     </head>  
  14.   
  15.     <body>  
  16.         <div id="grid"></div>  
  17.         <script type="text/x-kendo-template" id="toolbar-template">  
  18.             <button type="button" class="k-button" id="printGrid">Print Grid</button>  
  19.         </script>  
  20.     </body>  
  21.   
  22. </html>  
JavaScript
  1. $(document)  
  2.     .ready(function ()  
  3.     {  
  4.         function printGrid()  
  5.         {  
  6.             var gridElement = $('#grid'),  
  7.                 printableContent = '',  
  8.                 win = window.open('', '', 'width=800, height=500'),  
  9.                 doc = win.document.open();  
  10.             var htmlStart = '  
  11. <!DOCTYPE html>' + '  
  12. <html>' + '  
  13.     <head>' + '  
  14.         <meta charset="utf-8" />' + '  
  15.         <title>Kendo UI Grid</title>' + '  
  16.         <link href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" rel="stylesheet" /> ' + '  
  17.         <style>' + 'html { font: 11pt sans-serif; }' + '.k-grid { border-top-width: 0; }' + '.k-grid, .k-grid-content { height: auto !important; }' + '.k-grid-content { overflow: visible !important; }' + 'div.k-grid table { table-layout: auto; width: 100% !important; }' + '.k-grid .k-grid-header th { border-top: 1px solid; }' + '.k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' + '</style>' + '  
  18.     </head>' + '  
  19.     <body>';  
  20.             var htmlEnd = '</body>' + '  
  21. </html>';  
  22.             var gridHeader = gridElement.children('.k-grid-header');  
  23.             if(gridHeader[0])  
  24.             {  
  25.                 var thead = gridHeader.find('thead')  
  26.                     .clone()  
  27.                     .addClass('k-grid-header');  
  28.                 printableContent = gridElement  
  29.                 clone()  
  30.                 children('.k-grid-header')  
  31.                     .remove()  
  32.                 end()  
  33.                 children('.k-grid-content')  
  34.                 find('table')  
  35.                 first()  
  36.                 children('tbody')  
  37.                     .before(thead)  
  38.                 end()  
  39.                 end()  
  40.                 end()  
  41.                 end()[0].outerHTML;  
  42.             }  
  43.             else  
  44.             {  
  45.                 printableContent = gridElement.clone()[0].outerHTML;  
  46.             }  
  47.             doc.write(htmlStart + printableContent + htmlEnd);  
  48.             doc.close();  
  49.             win.print();  
  50.         }  
  51.         $(function ()  
  52.         {  
  53.             var grid = $('#grid')  
  54.                 .kendoGrid(  
  55.                 {  
  56.                     dataSource:  
  57.                     {  
  58.                         type: 'json',  
  59.                         transport:  
  60.                         {  
  61.                             read: "api/Products"  
  62.                         },  
  63.                         pageSize: 20,  
  64.                         serverPaging: true,  
  65.                         serverSorting: true,  
  66.                         serverFiltering: true  
  67.                     },  
  68.                     toolbar: kendo.template($('#toolbar-template')  
  69.                         .html()),  
  70.                     height: 400,  
  71.                     pageable: true,  
  72.                     columns: [  
  73.                     {  
  74.                         field: 'ProductName',  
  75.                         title: 'Product Name'  
  76.                     },  
  77.                     {  
  78.                         field: 'UnitPrice',  
  79.                         title: 'Unit Price',  
  80.                         width: 100  
  81.                     }]  
  82.                 });  
  83.             $('#printGrid')  
  84.                 .click(function ()  
  85.                 {  
  86.                     printGrid();  
  87.                 });  
  88.         });  
  89.     });  
Result in Browser
print in grid
print

I Hope you enjoyed this article. Thank you!

Happy coding!


Similar Articles