Click here to Skip to main content
13,549,148 members
Click here to Skip to main content
Add your own
alternative version


19 bookmarked
Posted 4 Oct 2011
Licenced CPOL

Export Ajax datagrid to Excel File

, 4 Oct 2011
Rate this:
Please Sign up or sign in to vote.
Export Ajax datagrid to Excel file


In this part, I will demo how to export Ajax datagrid to Excel.


I posted another article "Generic Method to Export Data to Excel File" 2 years ago. In that article, I discuss how to use a generic method to export data to Excel when the datagrid is generated by Ajax call. It provides a generic method which does object mapping with the result and creates Excel to send back to client. Compare with what people usually do in normal ASP.NET datagrid or gridview, that they generate the control again or post the grid control back to generate the report. This way will save the network traffic, but it will bother the server to do the query again.

Now I have an issue, if some query is heavy, we should avoid hitting the database again. Then how to post the Ajax grid back to server without viewstate and create report is what I will show below, and it also uses part of the technique that I show in Part 1.

Step by Step

Step 1 (in Client Side JS File)

Convert the grid to JSON format array and post back to server.

Why not just send the table back to server? Because HTML table is heavy, it includes too many HTML tags and styling and also includes other things that we don't want to export.
Here is the code need in the client JS file:

//an array contains prototype method
Array.prototype.contains=function(val){for(i in this)
{if(this[i]==val)return true;}return false;}
//convert table to JSON array
function getTb(){
var hideIdx=[];
//filter those columns won't be exported, all those columns are defined 
//in the table column header by class or id. TB is table id.
$('#'+TB+' tr:eq(0) .hideCol,#checkCol,#imgCol').each(function()
var tbA=trA=[];
$('#'+TB+' tr').each(function(i,tr){
//create a object which has JSON array convert from table
//post the JSON array back to page
function post(url,params){
var F=$(document.createElement('form')).attr
for(var x in params){$(document.createElement('textarea')).attr
//an event fire post table back and invoke 'exportExcel' by name
function ExcelExport(){post(ajaxPath()+'exportExcel',getTb());}
//code below are in the Jpage that demo in part 1.
function ajaxPath(){return (pgUrl+
	((-1<pgUrl.indexOf('?'))?'&':'?')+'Rand='+new Date().getTime()+'&Ajax=');}
var pgUrl=document.location.href;

Step 2 (in Server Side C#)

Convert JSON array back to HTML format return.
In the server side, it will be handled as Ajax call and invoke exportExcel like I demo in Part 1, the exportExcel converts the array to HTML format table with MIME type "application/" directly sent back to client.

protect void exportExcel() {
	string tb=Param("tb");
	if (null == tb) {
		...handle exception here...
	//convert JSON Array back to html format
	byte[] ByteArray = System.Text.Encoding.Unicode.GetBytes
	Response.ContentType = "application/";
		"attachment; filename=" + "YourExcelReportName.xls");
	//encode international characters
	Page.Response.BinaryWrite(new byte[] { 0xFF, 0xFE });

Extension method to convert JSON array to plain HTML table:

public static string ToHtmlTable(this List<List<string>> lists) {
string td = "<td align=\"right\">{0}</td>";
StringBuilder sb = new StringBuilder();
sb.Append("<table border=\"1\">");
foreach (List<string> list in lists) {
foreach (string i in list) {
sb.Append(string.Format(td, i));
return sb.ToString();

Thanks for reading.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
Canada Canada
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionOrder of performance Pin
perezk11-Oct-11 10:34
memberperezk11-Oct-11 10:34 
AnswerRe: Order of performance Pin
kennysun13-Oct-11 7:55
memberkennysun13-Oct-11 7:55 
GeneralMy vote of 3 Pin
perezk11-Oct-11 10:31
memberperezk11-Oct-11 10:31 
GeneralRe: My vote of 3 Pin
kennysun13-Oct-11 7:58
memberkennysun13-Oct-11 7:58 
QuestionFor real XLS or XLSX format Pin
FilipKrnjic10-Oct-11 22:20
memberFilipKrnjic10-Oct-11 22:20 
GeneralMy vote of 1 Pin
Jepy10-Oct-11 22:04
memberJepy10-Oct-11 22:04 
QuestionI wont vote but: Pin
HaBiX4-Oct-11 20:03
memberHaBiX4-Oct-11 20:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180515.1 | Last Updated 4 Oct 2011
Article Copyright 2011 by kennysun
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid