[CLOSED] Exporting Data using Refresh event

[ecerrillos]

Hi,

I implemented the exporting functionality following the examples given using the Submit event.

However, I noticed the entire Data Store is sent from the client to the server which I don't find very useful and spends a lot of time (my grids have a lot of data) before hitting the server because I have the data already on the server cached.

Therefore, in order to bypass all this data sending to the server, I decided to use the Refresh method instead. It quickly hits the server where I retrieve my cached data and generate my export.

However, I have a problem where the Store's Load listener is not being triggered on the client once the export is received. It gets stuck and can only get unstuck manually by clicking next page or something like that.

Therefore, my question is: do you think it's a bug or it's just the way I did it is inappropriate? If the latter, then can you suggest a better way other than using Refresh?


Thank you,
Eben

[geoffrey.mcgill]

Hi Eben,

I'm not sure we're going to be able to determine anything without seeing a code sample. There seems to be a lot of moving parts in this problem and will take some time reproduce and determine what's going happening.

[ecerrillos]

Hi Jeff,

I understand is difficult to explain and much more so to understand!

That's why I got the Export via Ajax example from the sample library and modified it to duplicate my issue (please see attached).

Changes to Export via Ajax example:
1. Remove Store1_Submit()
2. Modify js "submitValue()" to call grid.reload().
3. Change "Store1_RefreshData()" to check if we're doing an export.

Let me know if you have any questions.



Thanks,
Eben

[Daniil]

Hi ecerrillos,

I tried your code and for me the load event is fired each time after clicking on the refresh button.
Maybe updating from the SVN solves this issue.

Please clarify do you really need to use the Refresh button to export?

All data is cached on server side as you mentioned. It means that there is no needing to submit anything from a GridPanel.
In this case exporting can be implemented via common Button with DirectEvent handler.

Please look at the example.

Example

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

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.Store.Primary;
            store.DataSource = new object[] { 
                                         new object[] {"test11", "test12", "test13"},
                                         new object[] {"test21", "test22", "test23"},
                                         new object[] {"test31", "test32", "test33"}
                                };
            store.DataBind();
        }
    }

    protected void ExportClick(object sender, DirectEventArgs e)
    {
        XmlDocument xmlDoc = new XmlDocument();
        xmlDoc.LoadXml("<records>" +
                            "<record>" +
                                "<test1>test11</test1>" +
                                "<test2>test21</test2>" +
                                "<test3>test31</test3>" +
                             "</record>" +
                       "</records>");
        this.Export(e.ExtraParams["format"], xmlDoc);
    }

    private void Export(string format, XmlNode xml)
    {
        this.Response.Clear();

        switch (format)
        {
            case "xml":
                string strXml = xml.OuterXml;
                this.Response.AddHeader("Content-Disposition", "attachment; filename=submittedData.xml");
                this.Response.AddHeader("Content-Length", strXml.Length.ToString());
                this.Response.ContentType = "application/xml";
                this.Response.Write(strXml);
                break;

            case "xls":
                this.Response.ContentType = "application/vnd.ms-excel";
                this.Response.AddHeader("Content-Disposition", "attachment; filename=submittedData.xls");
                XslCompiledTransform xtExcel = new XslCompiledTransform();
                xtExcel.Load(Server.MapPath("Excel.xsl"));
                xtExcel.Transform(xml, null, Response.OutputStream);

                break;

            case "csv":
                this.Response.ContentType = "application/octet-stream";
                this.Response.AddHeader("Content-Disposition", "attachment; filename=submittedData.csv");
                XslCompiledTransform xtCsv = new XslCompiledTransform();
                xtCsv.Load(Server.MapPath("Csv.xsl"));
                xtCsv.Transform(xml, null, Response.OutputStream);

                break;
        }
        this.Response.End();
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:ComboBox ID="ComboBox1" runat="server" FieldLabel="Choose format">
        <Items>
            <ext:ListItem Text="xml" Value="xml"/>
            <ext:ListItem Text="xls" Value="xls"/>
            <ext:ListItem Text="csv" Value="csv"/>
        </Items>
        <SelectedItem Value="xml"/>
    </ext:ComboBox>
    
    <ext:Button runat="server" Text="Export">
        <DirectEvents>
            <Click OnEvent="ExportClick" IsUpload="true">
                <ExtraParams>
                    <ext:Parameter Name="format" Value="#{ComboBox1}.getValue()" Mode="Raw" />
                </ExtraParams>
            </Click>
        </DirectEvents>
    </ext:Button>
    </form>
</body>
</html>

[ecerrillos]

Using refresh as an export mechanism was just something I used to avoid sending all the grid's data to the server.

Your solution is lot cleaner and better in every aspect; and exactly what I was looking for!!

One last question: You use a ComboBox to select the export format. How would you do it using a SplitButton with menu items.

<ext:SplitButton runat="server" Text="EXPORT" Icon="PageWhitePut">
                                        <Menu>
                                            <ext:Menu ID="MenuExport" runat="server">
                                                <Items>
                                                    <ext:CheckMenuItem ID="CheckMenuItemExportPDF" runat="server" Text="to PDF" Icon="Page" Checked="true">
                                                        <Listeners>
                                                            <Click Handler="submitValue(#{GridPanel}, 'pdf');" />
                                                        </Listeners>
                                                    </ext:CheckMenuItem>
                                                    <ext:CheckMenuItem ID="CheckMenuItemExportRTF" runat="server" Text="to RTF" Icon="PageWord">
                                                        <Listeners>
                                                            <Click Handler="submitValue(#{GridPanel}, 'rtf');" />
                                                        </Listeners>
                                                    </ext:CheckMenuItem>
                                                    <ext:CheckMenuItem ID="CheckMenuItemExportXLS" runat="server" Text="to XLS" Icon="PageExcel">
                                                        <Listeners>
                                                            <Click Handler="submitValue(#{GridPanel}, 'xls');" />
                                                        </Listeners>
                                                    </ext:CheckMenuItem>
                                                    <ext:CheckMenuItem ID="CheckMenuItemExportXml" runat="server" Text="to XML" Icon="Xhtml">
                                                        <Listeners>
                                                            <Click Handler="submitValue(#{GridPanel}, 'xml');" />
                                                        </Listeners>
                                                    </ext:CheckMenuItem>
                                                </Items>                                            
                                            </ext:Menu>
                                        </Menu>
                                    </ext:SplitButton>

In the menu item Handler, can I instead force a button's direct event call?



Thanks,
Eben

[Daniil]

Hi,

I would suggest you this way.

Example

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

<%@ Import Namespace="System.Xml.Xsl" %>
<%@ Import Namespace="System.Xml" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.Store.Primary;
            store.DataSource = new object[] {
                                         new object[] {"test11", "test12", "test13"},
                                         new object[] {"test21", "test22", "test23"},
                                         new object[] {"test31", "test32", "test33"}
                                };
            store.DataBind();
        }
    }

    protected void ExportClick(object sender, DirectEventArgs e)
    {
        XmlDocument xmlDoc = new XmlDocument();
        xmlDoc.LoadXml("<records>" +
                            "<record>" +
                                "<test1>test11</test1>" +
                                "<test2>test21</test2>" +
                                "<test3>test31</test3>" +
                             "</record>" +
                       "</records>");
        this.Export(e.ExtraParams["format"], xmlDoc);
    }

    private void Export(string format, XmlNode xml)
    {
        this.Response.Clear();

        switch (format)
        {
            case "xml":
                string strXml = xml.OuterXml;
                this.Response.AddHeader("Content-Disposition", "attachment; filename=submittedData.xml");
                this.Response.AddHeader("Content-Length", strXml.Length.ToString());
                this.Response.ContentType = "application/xml";
                this.Response.Write(strXml);
                break;

            case "xls":
                this.Response.ContentType = "application/vnd.ms-excel";
                this.Response.AddHeader("Content-Disposition", "attachment; filename=submittedData.xls");
                XslCompiledTransform xtExcel = new XslCompiledTransform();
                xtExcel.Load(Server.MapPath("Excel.xsl"));
                xtExcel.Transform(xml, null, Response.OutputStream);

                break;

            case "csv":
                this.Response.ContentType = "application/octet-stream";
                this.Response.AddHeader("Content-Disposition", "attachment; filename=submittedData.csv");
                XslCompiledTransform xtCsv = new XslCompiledTransform();
                xtCsv.Load(Server.MapPath("Csv.xsl"));
                xtCsv.Transform(xml, null, Response.OutputStream);

                break;
        }
        this.Response.End();
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:SplitButton runat="server" Text="Export" Icon="PageWhitePut">
        <Menu>
            <ext:Menu runat="server">
                <Items>
                    <ext:MenuItem ID="MenuItemXml" Text="To xml" />
                    <ext:MenuItem ID="MenuItemXls" Text="To xls" />
                    <ext:MenuItem ID="MenuItemCsv" Text="To csv" />
                </Items>
                <DirectEvents>
                    <ItemClick 
                        OnEvent="ExportClick" 
                        IsUpload="true" 
                        Before="switch (menuItem.id) {
                                    case 'MenuItemXml': 
                                        extraParams.format = 'xml';
                                        break;
                                    case 'MenuItemXls': 
                                        extraParams.format = 'xls';
                                        break;
                                    case 'MenuItemCsv': 
                                        extraParams.format = 'csv';
                                        break;
                                }"/>
                </DirectEvents>
            </ext:Menu>
        </Menu>
    </ext:SplitButton>
    </form>
</body>
</html>

Please note that almost each listener has an DirectEvent analog.

[ecerrillos]

Perfect!!!