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

Gowtham K
9y
7.9k
0
0
100
Article

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:

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:

public class Product
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int ProductID
{
get;
set;
}
[Required]
public string ProductName
{
get;
set;
}
[Required]
public string UnitPrice
{
get;
set;
}
}

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:

public class ProductContext: DbContext
{
public ProductContext(): base("name=TestConnection")
{
}
public DbSet < Product > Products
{
get;
set;
}
}

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.

Figure 3: Add scaffold

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:

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:

Print the existing web page, but use a print style sheet to hide parts of the page that are not needed.
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

<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/x-kendo-template" id="toolbar-template">
<button type="button" class="k-button" id="printGrid">Print Grid</button>
</script>
</body>
</html>

JavaScript

$(document)
.ready(function ()
{
function printGrid()
{
var gridElement = $('#grid'),
printableContent = '',
win = window.open('', '', 'width=800, height=500'),
doc = win.document.open();
var htmlStart = '
<!DOCTYPE html>' + '
<html>' + '
<head>' + '
<meta charset="utf-8" />' + '
<title>Kendo UI Grid</title>' + '
<link href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" rel="stylesheet" /> ' + '
<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>' + '
</head>' + '
<body>';
var htmlEnd = '</body>' + '
</html>';
var gridHeader = gridElement.children('.k-grid-header');
if(gridHeader[0])
{
var thead = gridHeader.find('thead')
.clone()
.addClass('k-grid-header');
printableContent = gridElement
clone()
children('.k-grid-header')
.remove()
end()
children('.k-grid-content')
find('table')
first()
children('tbody')
.before(thead)
end()
end()
end()
end()[0].outerHTML;
}
else
{
printableContent = gridElement.clone()[0].outerHTML;
}
doc.write(htmlStart + printableContent + htmlEnd);
doc.close();
win.print();
}
$(function ()
{
var grid = $('#grid')
.kendoGrid(
{
dataSource:
{
type: 'json',
transport:
{
read: "api/Products"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: kendo.template($('#toolbar-template')
.html()),
height: 400,
pageable: true,
columns: [
{
field: 'ProductName',
title: 'Product Name'
},
{
field: 'UnitPrice',
title: 'Unit Price',
width: 100
}]
});
$('#printGrid')
.click(function ()
{
printGrid();
});
});
});