JQGrdi PDF Export

Posted by thanigai on Geeks with Blogs See other posts from Geeks with Blogs or by thanigai
Published on Mon, 17 Jun 2013 22:20:15 GMT Indexed on 2013/06/24 16:24 UTC
Read the original article Hit count: 441

Filed under:

Originally posted on: http://geekswithblogs.net/thanigai/archive/2013/06/17/jqgrdi-pdf-export.aspx

JQGrid PDF Export

The aim of this article is to address the PDF export from client side grid frameworks. The solution is done using the ASP.Net MVC 4 and VisualStudio 2012. The article assumes the developer to have a fair amount of knowledge on ASP.Net MVC and C#.

Tools Used

Visual Studio 2012
ASP.Net MVC 4
Nuget Package Manager

JQGrid is one of the client grid framework built on top of the JQuery framework. It helps in building a beautiful grid with paging, sorting and exiting options. There are also other features available as extension plugins and developers can write their own if needed. You can download the JQgrid from the JQGrid homepage or as NUget package. I have given below the command to download the JQGrid through the package manager console. From the tools menu select “Library Package Manager” and then select “Package Manager Console”. I have given the screenshot below.

This command will pull down the latest JQGrid package and adds them in the script folder.

Once the script is downloaded and referenced in the project update the bundleconfig file to add the script reference in the pages. Bundleconfig can be found in the App_Start folder in the project structure.

bundles .Add (newStyleBundle(“~/Content/jqgrid”).Include (“~/Content/ui.jqgrid.css”));

bundles.Add( newScriptBundle( “~/bundles/jquerygrid”) .Include( “~/Scripts/jqGrid/jquery.jqGrid*”));

Once added the config’s refer the bundles to the Views/Shared/LayoutPage.cshtml. Add the following lines to the head section of the page.

@Styles.Render(“~/Content/jqgrid”)

Add the following lines to the end of the page before html close tags.

@Scripts.Render(“~/bundles/jquery”)

@Scripts.Render(“~/bundles/jqueryui”)

@Scripts.Render(“ ~/bundles/jquerygrid”)

That’s all to be done from the view perspective. Once these steps are done the developer can start coding for the JQGrid. In this example we will modify the HomeController for the demo. The index action will be the default action. We will add an argument for this index action. Let it be nullable bool. It’s just to mark the pdf request. In the Index.cshtml we will add a table tag with an id “ gridTable “. We will use this table for making the grid. Since JQGrid is an extension for the JQUery we will initialize the grid setting at the script section of the page. This script section is marked at the end of the page to improve performance. The script section is placed just below the bundle reference for JQuery and JQueryUI. This is the one of improvement factors from “ why slow” provided by yahoo.

< tableid=“gridTable”class=“scroll”></ table>

< inputtype=“button”value=“Export PDF”onclick=“exportPDF();“
/>

@section scripts

{

<scripttype=“text/javascript”>

$(document).ready(
function()
{
$(“#gridTable”).jqGrid(
{
datatype:“json”,
url:‘@Url.Action(“GetCustomerDetails”)‘,
mtype:‘GET’,
colNames:["CustomerID","CustomerName","Location","PrimaryBusiness"],
colModel:[
{name:"CustomerID",width:40,index:"CustomerID",align:"center"},{name:"CustomerName",width:40,index:"CustomerName",align:
"center"},
{name:"Location",width:40,index:"Location",align:"center"},
{name:"PrimaryBusiness",width:40,index:"PrimaryBusiness",
align:"center"},],
height:250,
autowidth:true,
sortorder:“asc”,
rowNum:10,
rowList:[5,10,15,20],
sortname:“CustomerID”,
viewrecords:true}
);});

function exportPDF (){
document . location = ‘ @ Url . Action ( “Index” ) ?pdf=true’ ; }

</ script >

}

The exportPDF methos just sets the document location to the Index action method with PDF Boolean as true just to mark for download PDF.

An inmemory list collection is used for demo purpose. The GetCustomerDetails
method is the server side action method that will provide the data as JSON list. We will see the method explanation below.

[ HttpGet]
publicJsonResultGetCustomerDetails(){

varresult=new { total=1, page=1,
records=customerList.Count(),
rows=( customerList.Select( e=>new { id=e.CustomerID, cell=new
string[]{ e.CustomerID.ToString(), e.CustomerName, e.Location, e.PrimaryBusiness}})) .ToArray()};
return
Json( result, JsonRequestBehavior.AllowGet);

}

JQGrid can understand the response data from server in certain format. The server method shown above is taking care of formatting the response so that JQGrid understand the data properly. The response data should contain totalpages, current page, full record count, rows of data with id and remaining columns as string array. The response is built using an anonymous object and will be sent as a MVC JsonResult. Since we are using HttpGet it’s better to mark the attribute as HttpGet and also the JSON requestbehavious as AllowGet. The inmemory list is initialized in the homecontroller constructor for reference.

Public class HomeController : Controller{

private readonly Ilist < CustomerViewModel > customerList ;
public HomeController (){

customerList=newList<CustomerViewModel>() {

newCustomerViewModel{ CustomerID=100, CustomerName=“Sundar”, Location=“Chennai”, PrimaryBusiness=“Teacing”},

new
CustomerViewModel{ CustomerID=101, CustomerName=“Sudhagar”, Location=“Chennai”, PrimaryBusiness=“Software”},

new
CustomerViewModel{ CustomerID=102, CustomerName=“Thivagar”, Location=“China”, PrimaryBusiness=“SAP”},

};

}

publicActionResultIndex( bool?pdf){

if ( !pdf.HasValue){

returnView( customerList);}

else{

stringfilePath=Server.MapPath( “Content”) +“Sample.pdf”;
ExportPDF( customerList, new string[]{ “CustomerID”, “CustomerName”, “Location”, “PrimaryBusiness” }, filePath);

return File ( filePath , “application/pdf” , “list.pdf” );

}

The index actionmethod has a Boolean argument named “pdf”. It’s used to indicate for PDF download. When the application starts this method is first hit for initial page request. For PDF operation a filename is generated and then sent to the ExportPDF method
which
will take care of generating the PDF from the datasource. The ExportPDF method is listed below.

Private static void ExportPDF<TSource>(IList<TSource>
customerList,string [] columns, string
filePath){

FontheaderFont=FontFactory.GetFont( “Verdana”, 10, Color.WHITE);

Fontrowfont=
FontFactory.GetFont( “Verdana”, 10, Color.BLUE);

Documentdocument=newDocument( PageSize.A4);

PdfWriter writer = PdfWriter . GetInstance ( document , new
FileStream ( filePath , FileMode . OpenOrCreate ));

document.Open();
PdfPTabletable=newPdfPTable( columns.Length);

foreach ( varcolumnincolumns){

PdfPCellcell=newPdfPCell( newPhrase( column, headerFont));

cell.BackgroundColor=Color.BLACK;

table.AddCell( cell);

}

foreach ( var item in customerList )

{

foreach ( varcolumnincolumns){
stringvalue=
item.GetType() .GetProperty( column) .GetValue( item) .ToString();

PdfPCellcell5=newPdfPCell( newPhrase( value, rowfont));

table.AddCell( cell5);

}

document.Add( table);

document.Close();

}

iTextSharp is one of the pioneer in PDF export. It’s an opensource library readily available as NUget library.

This command will pulldown latest available library. I am using the version 4.1.2.0. The latest version may have changed. There are three main things in this library.

Document
This is the document class which takes care of creating the document sheet with particular size. We have used A4 size. There is also an option to define the rectangle size. This document instance will be further used in next methods for reference.
PdfWriter
PdfWriter takes the filename and the document as the reference. This class enables the document class to generate the PDF content and save them in a file.
Font
Using the FONT class the developer can control the font features. Since I need a nice looking font I am giving the Verdana font.

Following this PdfPTable and PdfPCell are used for generating the normal table layout. We have created two set of fonts for header and footer.

Font headerFont=
FontFactory .GetFont(“Verdana”, 10, Color .WHITE);

Font rowfont=
FontFactory .GetFont(“Verdana”, 10, Color .BLUE);

We are getting the header columns as string array. Columns argument array is looped and header is generated. We are using the headerfont for this purpose.

PdfWriter writer=
PdfWriter .GetInstance(document, new
FileStream (filePath, FileMode.OpenOrCreate));

document.Open();
PdfPTabletable=new
PdfPTable( columns.Length);

foreach ( varcolumnincolumns){

PdfPCellcell=newPdfPCell( new
Phrase( column, headerFont));

cell.BackgroundColor=Color.BLACK;

table.AddCell( cell);

}

Then reflection is used to generate the row wise details and form the grid.

foreach (var item in customerList){

foreach ( varcolumnincolumns) {

stringvalue=
item.GetType() .GetProperty( column) .GetValue( item) .ToString();

PdfPCellcell5=newPdfPCell( newPhrase( value, rowfont));

table.AddCell( cell5);

}

document . Add ( table );
document . Close ();

Once the process id done the pdf table is added to the document and document is closed to write all the changes to the filepath given. Then the control moves to the controller which will take care of sending the response as a JSON result with a filename. If the file name is not given then the PDF will open in the same page otherwise a popup will open up asking whether to save the file or open file.

Return File(filePath, “application/pdf”,“list.pdf”);

The final result screen is shown below.

PDF file opened below to show the output.

Conclusion:

This is how the export pdf is done for JQGrid. The problem area that is addressed here is the clientside grid frameworks won’t support PDF’s export. In that time it’s better to have a fine grained control over the data and generated PDF. iTextSharp has helped us to achieve our goal.

Developer IT

JQGrdi PDF Export - Developer IT

JQGrdi PDF Export

JQGrid PDF Export

Categories cloud