[CLOSED] Issue with Export to Excel in GridPanel

  1. #1

    [CLOSED] Issue with Export to Excel in GridPanel

    Hi guys.

    I have a little problem when I try to export to excel the data from a GridPanel.

    let me explain, I have a Grid that contain some random data and a button that contain the main function to export to Excel (Same as Ext.net Example with Ajax https://examples4.ext.net/#/GridPane...Data_PostBack/).

    the code:
    <!DOCTYPE html>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] {"ASASDSADA", "Prueba Creación Nueva Relación", "PERSONAS NATURALES", "Persona","U01B648A", "ROLES DE USUARIOS", "Rol", "U01C7DCD", "Gestión de Recursos", "Personas", "Creación de Personas", "Personas Naturales", "Prueba creación nueva relación", "U01B648", "U01C7DCS"},
                    new object[] {"DASDDFEFE", "Tipo Portico V/S Clase Credencial", "Tipos de Porticos", "Referencia","U019E74C", "Tipos de Porticos", "Referencia", "U019E74C", "Gestión de Presencia, Asistencia y Tiempo", "Registro de Asistencia y Tiempo", "Gestión de Asistencia y Tiempo Laboral", "Registro del Tiempo", "Asocia el Tipo de pórtico versus la clase de credencial utilizada en dicho tipo", "Z0B9944", "Z0B9947"},
                    new object[] {"TYUTYJGHJG", "Tipo Dispositivo V/S Clase Credencial", "Tipo Dispositivo A&T", "Referencia","U019E74C", "Clase de Credencialización", "Referencia", "U019E74CS", "Gestión de Presencia, Asistencia y Tiempo", "Registro de Asistencia y Tiempo", "Gestión de Asistencia y Tiempo Laboral", "Registro del Tiempo", "Asocia el Tipo de pórtico versus la clase de credencial utilizada en dicho tipo", "Z0B9955", "Z0B994F"},
                    
                };
    
                this.Store1.DataBind();
            }
        }
    
    
        protected void MenuItemXLS_Click(object sender, EventArgs e)
        {
            string json = this.Hidden1.Value.ToString();
            StoreSubmitDataEventArgs eSubmit = new StoreSubmitDataEventArgs(json, null);
            System.Xml.XmlNode xml = eSubmit.Xml;
    
    
            this.Response.Clear();
            this.Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
            
            this.Response.AddHeader("Content-Disposition", "attachment; filename=TestXLS.xls");
            
            System.Xml.Xsl.XslCompiledTransform xtExcel = new System.Xml.Xsl.XslCompiledTransform();
    
            xtExcel.Load(Server.MapPath("Excel.xsl"));
            xtExcel.Transform(xml, null, this.Response.OutputStream);
            this.Response.End();
        }
            
    </script>
    <script>
        var saveData = function () {
            var data = App.GridPanel1.getRowsValues(
                    {
                        prepare: function (data, record) {
                        }
                    }),
                    columns = App.GridPanel1.getView().getGridColumns(),
                    headers = {};
    
            Ext.each(columns, function (c) {
                headers[c.dataIndex] = c.text.replace(/ /g, "_");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/á/g, "a");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/é/g, "e");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/Ã*/g, "i");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/ó/g, "o");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/ú/g, "u");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/ñ/g, "n");
            });
    
            Ext.each(data, function (record) {
                for (var field in record) {
                    record[headers[field]] = record[field];
                    delete record[field];
                }
            });
    
            App.Hidden1.setValue(Ext.encode(data));
            //App.Hidden1.setValue(Ext.encode(App.GridPanel1.getRowsValues({ selectedOnly: false })));
        };
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" /> 
    
            <ext:Hidden ID="Hidden1" runat="server" />
    
            <ext:FormPanel ID="FormPanel1" runat="server" Region="North"
                            >
                        <DockedItems>
                            <ext:Toolbar ID="ToolbarTools" runat="server" Dock="Top" Cls="my-toolbar1">
                                <Items>                                
                                    <ext:ToolbarFill />                                
                                    
                                    <ext:Button ID="ButtonExportar" runat="server" Icon="PageSave" Text="Exportar">
                                        <Menu>
                                            <ext:Menu ID="MenuExportar" runat="server">
                                                <Items>
                                                    
                                                    <ext:MenuItem ID="MenuItemXLS" runat="server" Icon="PageExcel" Text="Exportar Excel" OnClick="MenuItemXLS_Click" AutoPostBack="true">
                                                        <Listeners>
                                                            <Click Fn="saveData" />
                                                        </Listeners>
                                                    </ext:MenuItem>
                                                    
                                                </Items>
                                            </ext:Menu>
                                        </Menu>
                                        
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </DockedItems>
                    </ext:FormPanel>
            <div>
                <ext:GridPanel ID="GridPanel1" runat="server">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="COD" />
                                        <ext:ModelField Name="NAME" />
                                            <ext:ModelField Name="ORIGIN" />
                                            <ext:ModelField Name="LEVEL_ORIGIN" />
                                            <ext:ModelField Name="LEVEL_JQ_ORIGIN" />
                                            <ext:ModelField Name="DESTINY" />
                                            <ext:ModelField Name="LEVEL_DESTINY" />
                                            <ext:ModelField Name="LEVEL_JQ_DESTINY" />
                                            <ext:ModelField Name="MODULE" />
                                            <ext:ModelField Name="FUNCTION" />
                                            <ext:ModelField Name="PROCESS" />
                                            <ext:ModelField Name="ACTIVITY" />
                                            <ext:ModelField Name="DESCRIPTION" />
                                            <ext:ModelField Name="U01B2C6" />
                                            <ext:ModelField Name="U01B2C7" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
    
                    <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column5" runat="server" Text="Código" DataIndex="COD" Sortable="true" Locked="true" /> 
                        <ext:Column ID="Column6" runat="server" Text="Nombre" DataIndex="NAME" Sortable="true" />
                        <ext:Column ID="Column7" runat="server" Text="Origen" DataIndex="ORIGIN" Sortable="true" />
                        <ext:Column ID="Column8" runat="server" Text="Nivel Origen" DataIndex="LEVEL_ORIGIN" Sortable="true" />
                        <ext:Column ID="Column9" runat="server" Text="Destino" DataIndex="DESTINY" Sortable="true" />
                        <ext:Column ID="Column10" runat="server" Text="Nivel Destino" DataIndex="LEVEL_DESTINY" Sortable="true" />
                        <ext:Column ID="Column11" runat="server" Text="Módulo" DataIndex="MODULE" Sortable="true" />
                        <ext:Column ID="Column12" runat="server" Text="Función" DataIndex="FUNCTION" Sortable="true" />
                        <ext:Column ID="Column13" runat="server" Text="Proceso" DataIndex="PROCESS" Sortable="true" />
                        <ext:Column ID="Column14" runat="server" Text="Actividad" DataIndex="ACTIVITY" Sortable="true" />
    
    
                    </Columns>
                </ColumnModel>
                </ext:GridPanel>
    
            </div>
        </form>
    </body>
    </html>
    this should be generate a .xls archive with the data (this works in 2.x):

    Click image for larger version. 

Name:	ProblemaEXCEL2.JPG 
Views:	54 
Size:	55.8 KB 
ID:	24681

    but with the library's update (2.x to 4.x) now generates a Column "Undefined"

    Click image for larger version. 

Name:	ProblemaEXCEL.jpg 
Views:	56 
Size:	46.6 KB 
ID:	24682

    in the "saveData" function (line 43) , I manipulate the data, replace the accent mark with letters without that.

    so how can I eliminate that "ghost column"?

    regards
    Last edited by fabricio.murta; Jul 19, 2016 at 6:49 PM.
  2. #2
    Hello @Opendat2000! Thanks for the runnable test case!

    To your line 117, add a IDProperty="COD" so you use the COD field as unique identifier for the columns.

    And you'll still have another "undefined" column set. Just add a column mapping to it between lines 141-154. You'll probably want to hide it if you don't want it to be shown by default. Or just do not load those columns (remove them from model and server response completely) if you are not going to use them anyway.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio, thanks for the reply.

    I included the "IDProperty" you recommended, and this worked. finally, I could eliminate the "Ghost Column" in the Javascript code like this:

    <script>
        var saveData = function () {
            var data = App.GridPanel1.getRowsValues(
                    {
                        prepare: function (data, record) {
                        }
                    }),
                    columns = App.GridPanel1.getView().getGridColumns(),
                    headers = {};
    
            Ext.each(columns, function (c) {
                headers[c.dataIndex] = c.text.replace(/ /g, "_");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/á/g, "a");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/é/g, "e");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/Ã*/g, "i");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/ó/g, "o");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/ú/g, "u");
                headers[c.dataIndex] = headers[c.dataIndex].replace(/ñ/g, "n");
            });
    
            Ext.each(data, function (record) {
                for (var field in record) {
                    if (headers[field] != undefined) {//new Code....
                        record[headers[field]] = record[field];
                        delete record[field];
                    } else {
                        delete record[field];
                    }
                }
            });
    
            App.Hidden1.setValue(Ext.encode(data));
        };
    </script>

    With this fix, I can control when a header is "undefined".

    thanks for the help!. please close the thread.
  4. #4
    Glad it helped, and thanks for sharing the solution that worked best for you!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. export gridpanel data to excel
    By AbdallahAshour in forum 3.x Help
    Replies: 4
    Last Post: Jul 30, 2015, 7:21 AM
  2. Replies: 0
    Last Post: Feb 12, 2014, 12:19 PM
  3. 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
  4. [CLOSED] Gridpanel export Excel HeaderText
    By CPA1158139 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 10, 2012, 9:36 AM
  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

Tags for this Thread

Posting Permissions