Export Data Postback

[xDroid]

Hi

When i export data to Excel, I get a "id" column i don't want, this worked in ver 3:

id
App.Model2-1
App.Model2-2
App.Model2-3
.
.


Any ideas to fix this extra data?

/x

[fabricio.murta]

Hello @xDroid!

I am not sure how you written your code as to make this 'id' column, would you kindly provide us a test case reproducing the issue so we can advise you on how to avoid that column from being output?

[xDroid]

Hi

The code is from your example, but without the id:

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

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };

            this.Store1.DataBind();
        }
    }

    protected void ToXml(object sender, EventArgs e)
    {
        string json = this.Hidden1.Value.ToString();
        StoreSubmitDataEventArgs eSubmit = new StoreSubmitDataEventArgs(json, null);
        XmlNode xml = eSubmit.Xml;

        string strXml = xml.OuterXml;

        this.Response.Clear();
        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);
        this.Response.End();
    }

    protected void ToExcel(object sender, EventArgs e)
    {
        string json = this.Hidden1.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=submittedData.xls");

        XslCompiledTransform xtExcel = new XslCompiledTransform();

        xtExcel.Load(Server.MapPath("/Xml/Excel.xsl"));
        xtExcel.Transform(xml, null, this.Response.OutputStream);
        this.Response.End();
    }

    protected void ToCsv(object sender, EventArgs e)
    {
        string json = this.Hidden1.Value.ToString();
        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=submittedData.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 runat="server">
    <title>Export Data from GridPanel into XML, Excel or CSV using a full PostBack - Ext.NET Examples</title>
    <link href="/css/examples.css" rel="stylesheet" />

    <script>
        var saveData = function () {
            App.Hidden1.setValue(Ext.encode(App.GridPanel1.getRowsValues({selectedOnly : false})));
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:resourcemanager runat="server" />

        <h1>Export Data from GridPanel into XML, Excel or CSV using a full PostBack</h1>

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

        <ext:Store ID="Store1" runat="server">
            <model>
                <ext:model runat="server">
                    <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" dateformat="M/d hh:mmtt" />
                    </fields>
                </ext:model>
            </model>
        </ext:Store>

        <ext:GridPanel ID="GridPanel1"
                       runat="server"
                       StoreID="Store1"
                       Title="Export Data"
                       Width="600"
                       Height="350">
            <columnmodel runat="server">
                <columns>
                    <ext:column runat="server" text="Company" dataindex="company" flex="1" />
                    <ext:column runat="server" text="Price" width="75" dataindex="price">
                        <renderer format="UsMoney" />
                    </ext:column>
                    <ext:column runat="server" text="Change" width="75" dataindex="change" />
                    <ext:column runat="server" text="Pct.Change" width="75" dataindex="pctChange" />
                    <ext:datecolumn runat="server" text="Last Updated" width="85" dataindex="lastChange" />
                </columns>
            </columnmodel>
            <selectionmodel>
                <ext:rowselectionmodel runat="server" mode="Multi" />
            </selectionmodel>
            <view>
                <ext:gridview runat="server" striperows="true" trackover="true" />
            </view>
            <topbar>
                <ext:toolbar runat="server">
                    <items>
                        <ext:toolbarfill runat="server" />

                        <ext:button runat="server" text="To XML" autopostback="true" onclick="ToXml" icon="PageCode">
                            <listeners>
                                <click fn="saveData" />
                            </listeners>
                        </ext:button>

                        <ext:button runat="server" text="To Excel" autopostback="true" onclick="ToExcel" icon="PageExcel">
                            <listeners>
                                <click fn="saveData" />
                            </listeners>
                        </ext:button>

                        <ext:button runat="server" text="To CSV" autopostback="true" onclick="ToCsv" icon="PageAttach">
                            <listeners>
                                <click fn="saveData" />
                            </listeners>
                        </ext:button>
                    </items>
                </ext:toolbar>
            </topbar>
        </ext:GridPanel>
    </form>
</body>
</html>

[fabricio.murta]

Hello @xDroid!

You have two ways -- at least -- to get rid of this "id" column.

One of them is getting in the way of the field filling function and wiping the column out:

    <script>
        var saveData = function () {
            var tempData = App.GridPanel1.getRowsValues({ selectedOnly: false });

            for (var i in tempData) {
                delete tempData[i].id;
            }
            
            App.Hidden1.setValue(Ext.encode(tempData));
        };
    </script>

Another way would be to fiddle with the *.xsl files and set it to skip the 'id' column.

More than that, should you want things done server-side just decode the json array, strip it from the undesired columns, and encode it back before binding it to eSubmit.

If you want a realy robust application you should:
a) keep the client-side cleanup (removing the 'id' columns from script side, code provided above) so less and unnecessary data is not transferred to the server.
b) On server side, always decode the json array and rebuild a new one picking up the columns one by one -- this will ensure no "injected" columns with possibly arbitrary data (and possibly code execution pitfalls) are processed by the server.

Details about these subjects are beyond the scope of Ext.NET -- which is a front-end framework, independent from business logic. Ext.NET matters by allowing easier interface of data to/from .NET space.

I hope this helps!