WijGrid Export to Excel

Exporting data from Wijgrid widget to Excel is a common requirement for our customers. This blog demonstrates how you can export Wijgrid to Excel in two ways :

1. Client Side
2. Server Side

ClientSide

The simple logic of exporting Wijgrid at client side is to use the underlying HTML table and export its data using the following code:

$("#btnExport").click(function () {  
  if ($.browser.msie) {  
    var ExcelApp = new ActiveXObject("Excel.Application"),  
    ExcelSheet = new ActiveXObject("Excel.Sheet"),  
    columns = -1;  
    ExcelSheet.Application.Visible = true;  
    $('#demo tr:nth-child(1) td').each(function () {  
      if ($(this).attr('colspan')) {  
       columns += +$(this).attr('colspan');  
      }  
      else {  
       columns++;  
      }  
    });  
    var    i = 0, j = 0, cell = '';  
    $('#demo .wijmo-wijgrid-innercell').each(function(){  
      cell = $(this).text();  
      ExcelSheet.ActiveSheet.Cells(j+1,i+1).Value = cell;  
      i++;  
      if (i > columns) {i = 0;j++}  
       });  
      } else {  
        var htmlTable = $("#demo").parent().html();  
        var url = 'data:application/vnd.ms-excel,' + encodeURIComponent(htmlTable)  
        location.href = url  
        return false  
      }  
   });

In the above code, url contains the MIME type i.e “data:application/vnd.ms-excel” and the container element. This container element shouldn't have special characters. Hence, it is better to encode it using JavaScript's encodeURIComponent

Server Side

For exporting WijGrid at Server side, you need to pass the html table to the server as a string and then, use the Response object to save it as Excel. Here is the code :

//Save the html table in a hidden field  
function prepareHtml() {  
  $("#hiddenHtml").val($("#demo").parent().html());  
}

//at server side  
protected void btnExportServer_Click(object sender, EventArgs e)  
  {  
    Response.Clear();  
    Response.AddHeader("content-disposition", "attachment; filename=WijGridToExcel.xls");  
    Response.ContentType = "application/vnd.ms-excel";  
    Response.Write((string)Request.Params["hiddenHtml"]);  
    Response.End();  
  }

You may also refer to this sample implementing the same. Note: This method maybe not appropriate if wijgrid uses some features like scrolling, fixed header, etc. In that case iterate the data currently displayed by the grid, manually build a string representing html table and then use the above methods.