View Full Version : Export only visible columns - Gridpanel + Store

Jul 26, 2010, 12:10 AM
Hi All,
This Thread demonstrates how to export only the data from the Visible columns of a Gridpanel.

This uses Javascript(EXT) code to get access to the Store for the data and the Gridpanel to get columns showing.
I thought I'd post this so other users don't waste like 5+Hrs on it like I did :)


var exportData = function (grid) {
var store = grid.store;
store.ajaxEventConfig.isUpload = true;
var values = getValues(store, grid);

store.ajaxEventConfig.isUpload = false;
function getValues(store, grid) {
var noRows = store.data.items.length;
var noColumns = grid.colModel.columns.length;
var xml = '';
for (rowIndex = 0; rowIndex < noRows; rowIndex++) {
xml = xml + '<record>';
for (colIndex = 0; colIndex < noColumns; colIndex++) {
var name = grid.getColumnModel().getDataIndex(colIndex);
xml = xml + '<' + name + '>';
var record = grid.store.getAt(rowIndex);
xml = xml + record.get(name);
xml = xml + '</' + name + '>';
xml = xml + '</record>';
return xml;

HTML used

<ext:MenuItemID="MenuItem1"runat="server"Text="Export to Excel"Icon="PageExcel">
<ext:ColumnDataIndex="ShortDescription"Header="Short Description"Width="300">
<RowContextMenuHandler="e.preventDefault(); cntxMenu.dataRecord = this.store.getAt(rowIndex); cntxMenu.showAt(e.getXY());"/>

CSharp code used

publicpartialclassExportTest : System.Web.UI.Page
protectedvoid Page_Load(object sender, EventArgs e)
{if (!Ext.IsAjaxRequest)
this.Store1.DataSource = GetData();
publicvoid Store1_RefreshData(object sender, StoreRefreshDataEventArgs e)
this.Store1.DataSource = GetData();

publicvoid Store1_SubmitData(object sender, StoreSubmitDataEventArgs e)
XmlNode xml = e.Xml;
var xmlString = xml.InnerXml;
xml.InnerXml = Server.HtmlDecode(xml.InnerXml.Trim());
var xDoc = XDocument.Parse(xml.InnerXml);
//Skip first single <record>
var test = xDoc.Element("records").Element("record").Elements();
xmlString = "<records>";
xmlString = xmlString + string.Join(string.Empty, test.Select(i => i.ToString()).ToArray());
xmlString = xmlString + "</records>";
xmlString = xmlString.Replace("\r\n ", string.Empty);
xmlString = xmlString.Replace("\r\n ", string.Empty);
xmlString = xmlString.Replace("\r\n", string.Empty);
xmlString = xmlString.Replace(" ", string.Empty);
xml.InnerXml = xmlString;
this.Response.ContentType = "application/vnd.ms-excel";
this.Response.AddHeader("Content-Disposition", "attachment; filename=submittedData.xls");
XslCompiledTransform xtExcel = newXslCompiledTransform();
xtExcel.Transform(xml, null, this.Response.OutputStream);
publicList<Test> GetData()
return (from i inEnumerable.Range(1, 100)
Id = i,
Description = string.Concat(i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i),
ShortDescription = string.Concat(i, i, i, i, i, i, i, i, i, i, i)
public Test()
publicint Id { get; set; }
publicstring Description { get; set; }
publicstring ShortDescription { get; set; }

Aug 04, 2010, 7:01 PM
Hi moth1,

Thanks for taking the time to share this example.


Nov 10, 2010, 12:14 PM
this is good work. Thnks:o

Jan 11, 2011, 6:25 PM
Thanks for that. You can now also use getRowsValues and getRecordsValues:

Ext.encode(gridPanel.store.getRecordsValues({ visibleOnly:true, excludeId:true, grid:gridPanel }))Or

Ext.encode(gridPanel.getRowsValues({ visibleOnly:true, excludeId:true }))The new property in the options called excludeId was added just today as I had a need to ensure the hidden id column was not exported. See this for more info:

As an aside, I also had the need to export a grid that was generated via an ashx (so the normal post back, ajax or traditional, could not be used as the store/grid could not be regenerated on the server side). Dunno if that also helps: