Start Building Professional
Web Apps Today

Example export to Excel

Hello support,

I think you should post an example in the documentation or download link to export data from grid to excel.
The questions are many.

Best Regards,
FelipeTv.

You can export dhtmlxGrid to the CSV format. Please find example here http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/12_initialization_loading/13_pro_load_csv.html

Thanks for the reply but I think you misunderstood me.
I need a script or command that exports the grid to excel.

Example:

mygrid.export('c:\mydiretory\grid.xls')

Best Regards,
FelipeTv.

dhtmlxGrid is fully client side component. Conversion grid to excell is really server side task. Grid can serialize itself as XML or CSV - which can be used to further transformation on server side. 

dhtmlxGrid hasn't appropriate methods to convert itself to the .xls format. It can only be serialized to the csv format. If such requirement is critical in your case you can contact sales@dhtmlx.com and request for component customization. 

Solution in 3 steps:

Step 1:
Open the file dhtmlxGrid\codebase\ext\dhtmlxgrid_nxml.js

Paste this code:
//TOEXCEL
dhtmlXGridObject.prototype.exportToExcel = function(before,after)
 {
   var html="<style>TD {font-family:Arial;text-align:center};</style>";
   var st_hr=null;
   if (this._fake)
   {
    st_hr=this._hrrar;
    for (var i=0;i<this._fake._cCount;i++)this._hrrar[i]=null
   };
  html+="<base href='"+document.location.href+"'></base>";
  if (!this.parentGrid)html+=(before||"");
  html += '<table width="100%" border="2px" cellpadding="0" cellspacing="0">';
  var row_length = Math.max(this.rowsBuffer.length,this.rowsCol.length);
  var col_length = this._cCount;
  var width = this._printWidth();
  html += '<tr>';
  for (var i=0;i<col_length;i++)
   {
    if (this._hrrar && this._hrrar[i])continue;
    var hcell=this.hdr.rows[1].cells[this.hdr.rows[1]._childIndexes?this.hdr.rows[1]._childIndexes[parseInt(i)]:i];
    var colspan=(hcell.colSpan||1);
    var rowspan=(hcell.rowSpan||1);
    for (var j=1;j<colspan;j++)width[i]+=width[j];
    html += '<td rowspan="'+rowspan+'" width="'+width[i]+'%" style="padding-left:2px;padding-right:2px;background-color:lightgrey;" colspan="'+colspan+'">'+this.getHeaderCol(i)+'</td>';
    i+=colspan-1
   };
  html += '</tr>';
  for (var i=2;i<this.hdr.rows.length;i++)
   {
    if (_isIE)
     {
      html+="<tr style='background-color:lightgrey'>";
      var cells=this.hdr.rows[i].childNodes;
      for (var j=0;j < cells.length;j++)
      if (!this._hrrar || !this._hrrar[cells[j]._cellIndex]){html+=cells[j].outerHTML};
      html+="</tr>"
     }
    else
     html+="<tr style='background-color:lightgrey'>"+(this._fake?this._fake.hdr.rows[i].innerHTML:"")+this.hdr.rows[i].innerHTML+"</tr>"
   };
  for (var i=0;i<row_length;i++)
   {
    html += '<tr>';if (this.rowsCol[i] && this.rowsCol[i]._cntr){html+=this.rowsCol[i].innerHTML.replace(/<img[^>]*>/gi,"")+'</tr>';
    continue
   };
  if (this.rowsCol[i] && this.rowsCol[i].style.display=="none")continue;
  var row_id
  if (this.rowsCol[i])row_id=this.rowsCol[i].idd;
  else if (this.rowsBuffer[i])row_id=this.rowsBuffer[i].idd;
  else continue;
  for (var j=0;j<col_length;j++)
   {
    if (this._hrrar && this._hrrar[j])continue;
    if(this.rowsAr[row_id] && this.rowsAr[row_id].tagName=="TR"){var c=this.cells(row_id, j);
    if (c._setState)var value="";
    else if (c.getContent)value = c.getContent();
    else if (c.getImage || c.combo)var value=c.cell.innerHTML;
    else
    var value = c.getValue()
   }
  else
  var value=this._get_cell_value(this.rowsBuffer[i],j);
  var color = this.columnColor[j]?'background-color:'+this.columnColor[j]+';':'';
  var align = this.cellAlign[j]?'text-align:'+this.cellAlign[j]+';':'';
  var cspan = c.getAttribute("colspan");
  html += '<td style="padding-left:2px;padding-right:2px;'+color+align+'" '+(cspan?'colSpan="'+cspan+'"':'')+'>'+(value===""?"&nbsp;":value)+'</td>';
  if (cspan)j+=cspan-1};
  html += '</tr>';
  if (this.rowsCol[i] && this.rowsCol[i]._expanded)
   {
    var sub=this.cells4(this.rowsCol[i]._expanded.ctrl);
    if (sub.getSubGrid)html += '<tr><td colspan="'+col_length+'">'+sub.getSubGrid().exportToExcel()+'</td></tr>';
    else
    html += '<tr><td colspan="'+col_length+'">'+this.rowsCol[i]._expanded.innerHTML+'</td></tr>'
   }
 };
 if (this.ftr)for (var i=1;i<this.ftr.childNodes[0].rows.length;i++)html+="<tr style='background-color:lightgrey'>"+((this._fake && _isFF)?this._fake.ftr.childNodes[0].rows[i].innerHTML:"")+this.ftr.childNodes[0].rows[i].innerHTML+"</tr>";
 html += '</table>';
 if (this.parentGrid)return html;
 html+=(after||"");

//Here is the secret!!!
 var writeDataXLS = document.getElementById("toFileXLS");
 writeDataXLS.innerHTML = "<form action='report.asp' target='win' name='formToXLS' method='post'><textarea style='display:none;' name='dataToXLS' id='dataToXLS'></textarea></form>";

 var varXLS = document.getElementById("myGridToXLS");
 varXLS.value = html;
 document.formToXLS.submit();
//End the secret

 if (this._fake){this._hrrar=st_hr}};
 dhtmlXGridObject.prototype._printWidth=function()
  {
   var width = [];
   var total_width = 0;
   for (var i=0;i<this._cCount;i++)
    {
     var w = this.getColWidth(i);
     width.push(w);
     total_width += w
    };
   var percent_width = [];
   var total_percent_width = 0;
   for (var i=0;i<width.length;i++)
    {
     var p = Math.floor((width[i]/total_width)*100);
     total_percent_width += p;
     percent_width.push(p)
    };
   percent_width[percent_width.length-1] += 100-total_percent_width;
   return percent_width
  };
//FIM TOEXCEL VIEW

Step 2:
Create file report.asp

Paste tihs code:

<%
 Response.ContentType="application/vnd.ms-excel"
 Response.AddHeader "content-disposition", "attachment; filename=relatorio.xls"
 response.Write(request.Form("dataToXLS"))
%>

Setp 3:

mygrid.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Export to Excel</title>
</head>

<body>

<link rel='STYLESHEET' type='text/css' href='../common/style.css'>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">

<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>
<script  src="../../codebase/ext/dhtmlxgrid_nxml.js"></script>
<script  src="../../codebase/dhtmlxgridcell.js"></script>

<div id="gridbox" width="100%" height="250px" style="background-color:white;"></div>
<a href="#" onClick="mygrid.exportToExcel()">Printable view</a>

<script>
 mygrid = new dhtmlXGridObject('gridbox');
 mygrid.setImagePath("../../codebase/imgs/");
 mygrid.loadXML("gridHP.xml");
</script>

<div id="toFileXLS"></div>

</body>
</html>