PDA

View Full Version : [CLOSED] How can include the headers of the GridPanel when export to excel



tactime10
Feb 12, 2013, 1:22 PM
Hi,

I need to include the multiheaders of the GridPanel when I export the file to excel.
I attached the image my GridPanel
5598

The code that created the GridPanel is below


<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<%@ Import Namespace="System.Xml.Xsl" %>
<%@ Import Namespace="System.Xml" %>

<script runat="server">

public List<object> CreateItems() {
List<object> listDefectivenessItems = new List<object> ();
for (int i = 0; i < 5; i++) {
double def = Double.Parse("50.0");
int pass = Int32.Parse("25");
int fail = Int32.Parse("25");
listDefectivenessItems.Add(new object[]{"partnumber",
def,pass,fail,
def,pass,fail,
def,pass,fail,
def,pass,fail,
def,pass,fail,
def,pass,fail,
def,pass,fail});
}
return listDefectivenessItems;
}

public void Page_Load() {
if (!X.IsAjaxRequest){
Store store = gridPanelReview.GetStore();
store.DataSource = this.CreateItems();
store.DataBind();
}
}

protected void SubmitReview(object sender, StoreSubmitDataEventArgs e) {
string format = this.formatTypeReview.Value.ToString();

XmlNode xml = e.Xml;

this.Response.Clear();

this.Response.ContentType = "application/vnd.ms-excel";
this.Response.AddHeader("Content-Disposition", "attachment; filename=Review.xls");
XslCompiledTransform xtExcel = new XslCompiledTransform();
xtExcel.Load(Server.MapPath("~/resources/template/Excel.xsl"));
xtExcel.Transform(xml, null, Response.OutputStream);
this.Response.End();
}
</script>

<script type="text/javascript">

var submitValue = function (grid, hiddenFormat, format) {
hiddenFormat.setValue(format);
grid.submitData(false, {isUpload:true});
};
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>Example</h1>

<ext:Hidden ID="formatTypeReview" runat="server" />

<ext:FormPanel runat="server" ID="formPanel" Width="800">
<Items>
<ext:GridPanel ID="gridPanelReview" runat="server" Flex="1" Border="true" Title="Review" Layout="FitLayout" Height="200">
<Store>
<ext:Store ID="reviewStore" runat="server">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="partNumber"/>

<ext:ModelField Name="defectivenessPeriod3" Type="Float"/>
<ext:ModelField Name="firstFailPeriod3" Type="Int"/>
<ext:ModelField Name="firstPassPeriod3" Type="Int"/>

<ext:ModelField Name="defectivenessPeriod4" Type="Float"/>
<ext:ModelField Name="firstFailPeriod4" Type="Int"/>
<ext:ModelField Name="firstPassPeriod4" Type="Int"/>

<ext:ModelField Name="defectivenessPeriod5" Type="Float"/>
<ext:ModelField Name="firstFailPeriod5" Type="Int"/>
<ext:ModelField Name="firstPassPeriod5" Type="Int"/>

<ext:ModelField Name="defectivenessPeriod6" Type="Float"/>
<ext:ModelField Name="firstFailPeriod6" Type="Int"/>
<ext:ModelField Name="firstPassPeriod6" Type="Int"/>

</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="PN" DataIndex="partNumber" Align="Left" Locked="true" />

<ext:Column runat="server" ID="headerColumnPeriod6" Lockable="false" Text="Period6">
<Columns>
<ext:Column runat="server" Text="Def" DataIndex="defectivenessPeriod6" Lockable="false" >
<Renderer Handler="return value + '%';" />
</ext:Column>
<ext:Column runat="server" Text="Fail" DataIndex="firstFailPeriod6" Lockable="false" />
<ext:Column runat="server" Text="Pass" DataIndex="firstPassPeriod6" Lockable="false" />
</Columns>
</ext:Column>

<ext:Column runat="server" ID="headerColumnPeriod5" Lockable="false" Text="Period5">
<Columns>
<ext:Column runat="server" Text="Def" DataIndex="defectivenessPeriod5" Lockable="false" >
<Renderer Handler="return value + '%';" />
</ext:Column>
<ext:Column runat="server" Text="Fail" DataIndex="firstFailPeriod5" Lockable="false" />
<ext:Column runat="server" Text="Pass" DataIndex="firstPassPeriod5" Lockable="false" />
</Columns>
</ext:Column>

<ext:Column runat="server" ID="headerColumnPeriod4" Lockable="false" Text="Period4">
<Columns>
<ext:Column runat="server" Text="Def" DataIndex="defectivenessPeriod4" Lockable="false">
<Renderer Handler="return value + '%';" />
</ext:Column>
<ext:Column runat="server" Text="Fail" DataIndex="firstFailPeriod4" Lockable="false" />
<ext:Column runat="server" Text="Pass" DataIndex="firstPassPeriod4" Lockable="false" />
</Columns>
</ext:Column>

<ext:Column runat="server" ID="headerColumnPeriod3" Lockable="false" Text="Period3">
<Columns>
<ext:Column runat="server" Text="Def" DataIndex="defectivenessPeriod3" Lockable="false" >
<Renderer Handler="return value + '%';" />
</ext:Column>
<ext:Column runat="server" Text="Fail" DataIndex="firstFailPeriod3" Lockable="false" />
<ext:Column runat="server" Text="Pass" DataIndex="firstPassPeriod3" Lockable="false" />
</Columns>
</ext:Column>
</Columns>
</ColumnModel>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />

<ext:Button ID="exportExcelReview" runat="server" Text="Export" Icon="PageExcel">
<Listeners>
<Click Handler="submitValue(#{gridPanelReview}, #{FormatTypeReview}, 'xls');" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<View>
<ext:GridView runat="server" StripeRows="true" />
</View>
</ext:GridPanel>
</Items>
</ext:FormPanel>
</form>
</body>
</html>


How can to do it?
Thank you so much.

Daniil
Feb 12, 2013, 2:48 PM
Hi @tactime10,

Please read this thread.
http://forums.ext.net/showthread.php?17972

It is actual for your question as well.

tactime10
Feb 13, 2013, 2:19 PM
Hi,

I see the post that you suggest me,
but if I insert the following code


var saveData = function () {
var data = #{GridPanel1}.getRowsValues(),
columns = #{GridPanel1}.getColumnModel().config,
headers = {
id : "ID_header"
},
dataWithHeaders = [],
recordWithHeaders;

Ext.each(columns, function (c) {
headers[c.dataIndex] = c.header.replace(/ /g, "_");
});

Ext.each(data, function (record) {
recordWithHeaders = {};
for (var field in record) {
recordWithHeaders[headers[field]] = record[field];
}
dataWithHeaders.push(recordWithHeaders);
});

#{GridData}.setValue(Ext.encode(dataWithHeaders));
};

in my page I see the java script error at the run time into the firefox
5603

I attached below the complete sample.


<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<%@ Import Namespace="System.Xml.Xsl" %>
<%@ Import Namespace="System.Xml" %>

<script runat="server">

public List<object> CreateItems() {
List<object> listDefectivenessItems = new List<object> ();
for (int i = 0; i < 5; i++) {
double def = Double.Parse("50.0");
int pass = Int32.Parse("25");
int fail = Int32.Parse("25");
listDefectivenessItems.Add(new object[]{"partnumber",
def,pass,fail,
def,pass,fail,
def,pass,fail,
def,pass,fail,
def,pass,fail,
def,pass,fail,
def,pass,fail});
}
return listDefectivenessItems;
}

public void Page_Load() {
if (!X.IsAjaxRequest){
Store store = gridPanelReview.GetStore();
store.DataSource = this.CreateItems();
store.DataBind();
}
}

protected void SubmitReview(object sender, StoreSubmitDataEventArgs e) {
string format = this.formatTypeReview.Value.ToString();

XmlNode xml = e.Xml;

this.Response.Clear();

this.Response.ContentType = "application/vnd.ms-excel";
this.Response.AddHeader("Content-Disposition", "attachment; filename=Review.xls");
XslCompiledTransform xtExcel = new XslCompiledTransform();
xtExcel.Load(Server.MapPath("~/resources/template/Excel.xsl"));
xtExcel.Transform(xml, null, Response.OutputStream);
this.Response.End();
}
</script>

<script type="text/javascript">

var saveData = function () {
var data = #{gridPanelReview}.getRowsValues(),
columns = #{gridPanelReview}.getColumnModel().config,
headers = {
id : "ID_header"
},
dataWithHeaders = [],
recordWithHeaders;

Ext.each(columns, function (c) {
headers[c.dataIndex] = c.header.replace(/ /g, "_");
});

Ext.each(data, function (record) {
recordWithHeaders = {};
for (var field in record) {
recordWithHeaders[headers[field]] = record[field];
}
dataWithHeaders.push(recordWithHeaders);
});

#{formatTypeReview}.setValue(Ext.encode(dataWithHe aders));
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>Example</h1>

<ext:Hidden ID="formatTypeReview" runat="server" />

<ext:FormPanel runat="server" ID="formPanel" Width="800">
<Items>
<ext:GridPanel ID="gridPanelReview" runat="server" Flex="1" Border="true" Title="Review" Layout="FitLayout" Height="200">
<Store>
<ext:Store ID="reviewStore" runat="server">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="partNumber"/>

<ext:ModelField Name="defectivenessPeriod3" Type="Float"/>
<ext:ModelField Name="firstFailPeriod3" Type="Int"/>
<ext:ModelField Name="firstPassPeriod3" Type="Int"/>

<ext:ModelField Name="defectivenessPeriod4" Type="Float"/>
<ext:ModelField Name="firstFailPeriod4" Type="Int"/>
<ext:ModelField Name="firstPassPeriod4" Type="Int"/>

<ext:ModelField Name="defectivenessPeriod5" Type="Float"/>
<ext:ModelField Name="firstFailPeriod5" Type="Int"/>
<ext:ModelField Name="firstPassPeriod5" Type="Int"/>

<ext:ModelField Name="defectivenessPeriod6" Type="Float"/>
<ext:ModelField Name="firstFailPeriod6" Type="Int"/>
<ext:ModelField Name="firstPassPeriod6" Type="Int"/>

</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="PN" DataIndex="partNumber" Align="Left" Locked="true" />

<ext:Column runat="server" ID="headerColumnPeriod6" Lockable="false" Text="Period6">
<Columns>
<ext:Column runat="server" Text="Def" DataIndex="defectivenessPeriod6" Lockable="false" >
<Renderer Handler="return value + '%';" />
</ext:Column>
<ext:Column runat="server" Text="Fail" DataIndex="firstFailPeriod6" Lockable="false" />
<ext:Column runat="server" Text="Pass" DataIndex="firstPassPeriod6" Lockable="false" />
</Columns>
</ext:Column>

<ext:Column runat="server" ID="headerColumnPeriod5" Lockable="false" Text="Period5">
<Columns>
<ext:Column runat="server" Text="Def" DataIndex="defectivenessPeriod5" Lockable="false" >
<Renderer Handler="return value + '%';" />
</ext:Column>
<ext:Column runat="server" Text="Fail" DataIndex="firstFailPeriod5" Lockable="false" />
<ext:Column runat="server" Text="Pass" DataIndex="firstPassPeriod5" Lockable="false" />
</Columns>
</ext:Column>

<ext:Column runat="server" ID="headerColumnPeriod4" Lockable="false" Text="Period4">
<Columns>
<ext:Column runat="server" Text="Def" DataIndex="defectivenessPeriod4" Lockable="false">
<Renderer Handler="return value + '%';" />
</ext:Column>
<ext:Column runat="server" Text="Fail" DataIndex="firstFailPeriod4" Lockable="false" />
<ext:Column runat="server" Text="Pass" DataIndex="firstPassPeriod4" Lockable="false" />
</Columns>
</ext:Column>

<ext:Column runat="server" ID="headerColumnPeriod3" Lockable="false" Text="Period3">
<Columns>
<ext:Column runat="server" Text="Def" DataIndex="defectivenessPeriod3" Lockable="false" >
<Renderer Handler="return value + '%';" />
</ext:Column>
<ext:Column runat="server" Text="Fail" DataIndex="firstFailPeriod3" Lockable="false" />
<ext:Column runat="server" Text="Pass" DataIndex="firstPassPeriod3" Lockable="false" />
</Columns>
</ext:Column>
</Columns>
</ColumnModel>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />

<ext:Button ID="exportExcelReview" runat="server" Text="Export" Icon="PageExcel">
<Listeners>
<Click Fn="saveData" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<View>
<ext:GridView runat="server" StripeRows="true" />
</View>
</ext:GridPanel>
</Items>
</ext:FormPanel>
</form>
</body>
</html>


Thanks.

Daniil
Feb 13, 2013, 2:25 PM
There is no solution for you in that thread. Moreover, it is for Ext.NET v1.

But it just explains some principles.