What's New?

[CLOSED] How can include the headers of the GridPanel when export to excel

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Feb 12, 2013, 12:22 PM

    [CLOSED] How can include the headers of the GridPanel when export to excel

    Hi,

    I need to include the multiheaders of the GridPanel when I export the file to excel.
    I attached the image my GridPanel
    Click image for larger version.  Name: Cattura.JPG  Views: 121  Size: 36.1 KB  ID: 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.
    Last edited by Daniil; Feb 19, 2013 at 3:39 AM. Reason: [CLOSED]
  2. #2
    Feb 12, 2013, 1:48 PM
    Hi @tactime10,

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

    It is actual for your question as well.
  3. #3
    Feb 13, 2013, 1: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
    Click image for larger version.  Name: Immagine.JPG  Views: 89  Size: 16.1 KB  ID: 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(dataWithHeaders));
	}
</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.
  4. #4
    Feb 13, 2013, 1:25 PM
    There is no solution for you in that thread. Moreover, it is for Ext.NET v1.

    But it just explains some principles.

Similar Threads

  1. How can Export data from GridPanel to Excel
    By delta in forum 2.x Help
    Replies: 2
    Last Post: Nov 14, 2012, 1:07 AM
  2. [CLOSED] Gridpanel export Excel HeaderText
    By CPA1158139 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 10, 2012, 9:36 AM
  3. GridPanel export to excel/csv - missing date column formatting
    By kumbahara in forum 1.x Help
    Replies: 2
    Last Post: May 22, 2011, 1:12 AM
  4. [CLOSED] Export Data To Excel in Remote Paging GridPanel
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 11, 2010, 8:49 PM
  5. How to export GridPanel to the Excel?
    By jachnicky in forum 1.x Help
    Replies: 3
    Last Post: Dec 01, 2008, 4:57 PM

Posting Permissions