[CLOSED] Button functionality in a GridPanel Tool

  1. #1

    [CLOSED] Button functionality in a GridPanel Tool

    I'm trying to implement a button with export functionality (csv, xls, xml) inside a GridPanel Tool.

    I have an approach but it doesn't look good. Is there a way to do it?

    here is my code, the button that i'm trying to use is the one with id=ExporInTool (button with id=ButtonExport is there just to show the functionality)

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Xml.Xsl" %>
    
    <script runat="server">
    
    
        private object[] TestData
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.TestData;
            }
        }
    
        protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind();
        }
    
                protected void MenuItemXML_Click(object sender, EventArgs e)
            {
                string json = this.hiddenExport.Value.ToString();
                json = json.Replace(" ", "_");
                StoreSubmitDataEventArgs eSubmit = new StoreSubmitDataEventArgs(json, null);
                XmlNode xml = eSubmit.Xml;
    
                string strXml = xml.OuterXml;
    
                this.Response.Clear();
                this.Response.AddHeader("Content-Disposition", "attachment; filename=Cuentas.xml");
                this.Response.AddHeader("Content-Length", strXml.Length.ToString());
                this.Response.ContentType = "application/xml";
                this.Response.Write(strXml);
                this.Response.End();
            }
    
    protected void MenuItemXLS_Click(object sender, EventArgs e)
            {
                string json = this.hiddenExport.Value.ToString();
                StoreSubmitDataEventArgs eSubmit = new StoreSubmitDataEventArgs(json, null);
                XmlNode xml = eSubmit.Xml;
    
                this.Response.Clear();
                this.Response.ContentType = "application/vnd.ms-excel";
                this.Response.AddHeader("Content-Disposition", "attachment; filename=Cuentas.xls");
                XslCompiledTransform xtExcel = new XslCompiledTransform();
    
                xtExcel.Load(Server.MapPath("Excel.xsl"));
                xtExcel.Transform(xml, null, this.Response.OutputStream);
                this.Response.End();
            }
    
                protected void MenuItemCSV_Click(object sender, EventArgs e)
            {
                string json = this.hiddenExport.Value.ToString();
                json = json.Replace(" ", "_");
                StoreSubmitDataEventArgs eSubmit = new StoreSubmitDataEventArgs(json, null);
                XmlNode xml = eSubmit.Xml;
    
                this.Response.Clear();
                this.Response.ContentType = "application/octet-stream";
                this.Response.AddHeader("Content-Disposition", "attachment; filename=Cuentas.csv");
    
                XslCompiledTransform xtCsv = new XslCompiledTransform();
    
                xtCsv.Load(Server.MapPath("Csv.xsl"));
                xtCsv.Transform(xml, null, this.Response.OutputStream);
                this.Response.End();
            }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Local Data Paging - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script type="text/javascript">
            var ExportDataCuentas = 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.hiddenExport.setValue(Ext.encode(data));
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Hidden ID="hiddenExport" runat="server" />
            <h1>The sample demonstrates local paging in the GridPanel</h1>
    
             <ext:FormPanel ID="FormPanelCuentas" runat="server"
                        Region="North"
                        BodyPadding="5"
                        MarginSpec="0 5 5 5"
                        Frame="true">
                        <DockedItems>
                            <ext:Toolbar ID="ToolbarTools" runat="server" Dock="Top" Cls="my-toolbar1">
                                <Items>
                                    <ext:ToolbarFill />
                                    <ext:Button ID="ButtonExport" runat="server" Icon="PageSave" Text="Export">
                                        <Menu>
                                            <ext:Menu ID="MenuExportar" runat="server">
                                                <Items>
                                                    <ext:MenuItem ID="MenuItemXML" runat="server" Icon="PageCode" Text="Exportar XML" OnClick="MenuItemXML_Click" AutoPostBack="true">
                                                        <Listeners>
                                                            <Click Fn="ExportDataCuentas" />
                                                        </Listeners>
                                                    </ext:MenuItem>
                                                    <ext:MenuItem ID="MenuItemXLS" runat="server" Icon="PageExcel" Text="Exportar Excel" OnClick="MenuItemXLS_Click" AutoPostBack="true">
                                                        <Listeners>
                                                            <Click Fn="ExportDataCuentas" />
                                                        </Listeners>
                                                    </ext:MenuItem>
                                                    <ext:MenuItem ID="MenuItemCSV" runat="server" Icon="PageAttach" Text="Exportar CSV" OnClick="MenuItemCSV_Click" AutoPostBack="true">
                                                        <Listeners>
                                                            <Click Fn="ExportDataCuentas" />
                                                        </Listeners>
                                                    </ext:MenuItem>
                                                </Items>
                                            </ext:Menu>
                                        </Menu>
                                        <ToolTips>
                                            <ext:ToolTip ID="ToolTipTools" runat="server" Html="Herramientas" />
                                        </ToolTips>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </DockedItems>
                    </ext:FormPanel>
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="850"
                Height="520">
                <Store>
                    <ext:Store
                        ID="Store1"
                        runat="server"
                        PageSize="10">
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="company">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                    <ext:ModelField Name="price" Type="Float" />
                                    <ext:ModelField Name="change" Type="Float" />
                                    <ext:ModelField Name="pctChange" Type="Float" />
                                    <ext:ModelField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                            <Editor>
                                <ext:TextField ID="TextField2" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="change" />
                        <ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="pctChange" />
                        <ext:DateColumn ID="DateColumn1"
                            runat="server"
                            Text="Last Updated"
                            Width="120"
                            DataIndex="lastChange"
                            Format="HH:mm:ss" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" />
                </Plugins>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar1" runat="server" 
                        DisplayInfo="true"
                        DisplayMsg="{0} - {1} de {2}"
                        HideRefresh="true" 
                        EmptyMsg="No hay registros a desplegar">
                </ext:PagingToolbar>
                </BottomBar>
    
                
                        <Tools>
                            
                      
                              <ext:Tool ID="ToolImprimir" Type="Print" Handler="App.GridPanel1.print();">
                                <ToolTips>
                                    <ext:ToolTip ID="ToolTipImprimir" runat="server" Html="Imprimir Cuentas de Usuario" />
                                </ToolTips>
                             </ext:Tool>
    
                            <ext:Tool>
                                <Content>
                                            <ext:Button ID="ExporInTool" runat="server" Icon="PageSave" Text="Export">
                                        <Menu>
                                            <ext:Menu ID="Menu1" runat="server">
                                                <Items>
                                                    <ext:MenuItem ID="MenuItem1" runat="server" Icon="PageCode" Text="Exportar XML" OnClick="MenuItemXML_Click" AutoPostBack="true">
                                                        <Listeners>
                                                            <Click Fn="ExportDataCuentas" />
                                                        </Listeners>
                                                    </ext:MenuItem>
                                                    <ext:MenuItem ID="MenuItem2" runat="server" Icon="PageExcel" Text="Exportar Excel" OnClick="MenuItemXLS_Click" AutoPostBack="true">
                                                        <Listeners>
                                                            <Click Fn="ExportDataCuentas" />
                                                        </Listeners>
                                                    </ext:MenuItem>
                                                    <ext:MenuItem ID="MenuItem3" runat="server" Icon="PageAttach" Text="Exportar CSV" OnClick="MenuItemCSV_Click" AutoPostBack="true">
                                                        <Listeners>
                                                            <Click Fn="ExportDataCuentas" />
                                                        </Listeners>
                                                    </ext:MenuItem>
                                                </Items>
                                            </ext:Menu>
                                        </Menu>
                                        <ToolTips>
                                            <ext:ToolTip ID="ToolTip1" runat="server" Html="Herramientas" />
                                        </ToolTips>
                                    </ext:Button>
    
                                </Content>
    
                            </ext:Tool>
                         </Tools>
            </ext:GridPanel>
    
    
    
         
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Jun 20, 2018 at 6:28 PM.
  2. #2
    Hello @opendat2000!

    Your test case has 300+ lines... I'm just wondering, all you need is a panel tools' button with a menu? Maybe this could be represented in a simpler way, right? It does not look right to add the Content block within the tool. This usually puts layout consistency in check and requires the developer extra care to maintain the order in components, as it allows arbitrary HTML within.

    Let me know if we can work with a simple (maybe just return a messageBox or Toast from the server (or even just a listener).

    I mean, if the sample button works for you, maybe we can drop about 250 lines off the code, right? Or maybe I didn't understand your requirements yet.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello, yes all i need is a panel tool with a button that can export the GridPanel data to Excel.

    Thank you for the fast answer
  4. #4
    Hello @Opendat2000!

    I get you already can save as you need if going by the standalone button with menu, right? So let's just focus on making the menu show by the tool button click on the panel header.

    You can copy-paste and have this running on your grid, then adapt it back to the menu the way you need it:

    <Tools>
        <ext:Tool runat="server" Type="Save" Handler="App.Menu1.showBy(this);">
            <Bin>
                <%-- Make a dangling menu that will be displayed on click by the tool --%>
                <ext:Menu ID="Menu1" runat="server">
                    <Items>
                        <ext:MenuItem ID="MenuItem1" runat="server" Icon="PageCode" Text="Exportar XML" OnClientClick="Ext.toast('save XML');">
                        </ext:MenuItem>
                        <ext:MenuItem ID="MenuItem2" runat="server" Icon="PageExcel" Text="Exportar Excel" OnClientClick="Ext.toast('save XLS');">
                        </ext:MenuItem>
                        <ext:MenuItem ID="MenuItem3" runat="server" Icon="PageAttach" Text="Exportar CSV" OnClientClick="Ext.toast('save CSV');">
                        </ext:MenuItem>
                    </Items>
                </ext:Menu>
            </Bin>
        </ext:Tool>
    </Tools>
    What's done here is a standalone menu. The menu code can be written anywhere in the page -- as long as the part is rendered by the time the grid panel is. The "special" here is just making the menu be shown by the tool when the tool is clicked, the handler in the second line of the code above.

    The Bin block is just a convenient way to wrap the menu within its ext:Tool premises, a good idea to improve readability and maintenance of the code (and you can copy over the grid with menu and all elsewhere if you need to reuse this code by old copy-paste).

    I prefered the Bin over the HtmlBin equivalent the same way I'd prefer Items over Content in components: to ensure component configuration objects and not plain HTML is dumped within the component, which can compromise layout, etc.

    I hope this helps!

    p.s.: I based the investigation in Examples Explorer's Export Data from GridPanel example.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    That's what we wanted, working perfectly

    Thank you!
  6. #6
    Hello @opendat2000!

    Glad it helped, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 17
    Last Post: Apr 27, 2016, 1:22 AM
  2. [CLOSED] Tool button not shown
    By stratek in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 30, 2012, 5:58 PM
  3. Replies: 0
    Last Post: May 25, 2012, 9:02 AM
  4. [CLOSED] tool tip and split button question
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 27, 2012, 11:13 PM
  5. [CLOSED] [1.0] Add AjaxEvent to Portlet tool button
    By betamax in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Sep 30, 2010, 9:43 PM

Tags for this Thread

Posting Permissions