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:


Figure 1: New Project


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:

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:
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.



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:

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