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>
  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>
  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>
  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!