Search code examples
apache-flexdatagridflex4filereferenceas3xls

Flex DataGrid Not Updating When Loading New Excel File


I am new to Flex coding and am trying to import an Excel file so that I can work with it later. I've cobbled enough together from the two articles below so that I can successfully load one Excel file and display the contents in a DataGrid.

However, if I try to upload a second Excel file, the contents of the DataGrid don't change. (And I end up truncating one row from the top, when the code re-writes the headers to the DataGrid.)

  1. http://blog.flexexamples.com/2007/09/21/uploading-files-in-flex-using-the-filereference-class
  2. http://code.google.com/p/as3xls/wiki/Tutorial

Full code is below. Any thoughts on where I'm going wrong?

Cheers and thanks in advance!

Corey

PS: There is a glitch in how I'm handling the headers, as any formulae in the Excel sheet still reference the original row after I remove the headers. They are pointing to one row below where they should.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns="*" creationComplete="init()" height="727" width="777">

<mx:Script>

    <![CDATA[
        import com.as3xls.xls.ExcelFile;
        import com.as3xls.xls.Sheet;

        import mx.collections.ArrayCollection;

        //Based on example from: http://blog.flexexamples.com/2007/09/21/uploading-files-in-flex-using-the-filereference-class/

        private var fileRef:FileReference;
        private var ba:ByteArray;
        private var xlFile:ExcelFile;
        private var hdrs:Array;
        private var runOnce:Boolean;


        [Bindable]
        private var xlsheet:ArrayCollection;

        private const FILE_URL:String = "http://localhost:8500/fileref/uploader.cfm";
        private const XLS_FILTER:FileFilter = new FileFilter("EXCEL FILES (*.xls, *.xlsx)", "*.xls; *.xlsx");
        private const TXT_FILTER:FileFilter = new FileFilter("TEXT FILES (*.txt, *.csv, *.tsv)", "*.txt; *.csv; *.tsv");
        private const ALL_FILTER:FileFilter = new FileFilter("ALL FILES (*.*)", "*.*");

        private function init():void {
            fileRef = new FileReference();
            fileRef.addEventListener(Event.SELECT, fileRef_select);
            fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
            fileRef.addEventListener(Event.COMPLETE, fileRef_complete);

            ba = new ByteArray();
            xlFile = new ExcelFile();
            hdrs = new Array();
            xlsheet = new ArrayCollection();
        }

        private function browseAndUpload():void {
            fileRef.browse([XLS_FILTER, TXT_FILTER, ALL_FILTER]);
            message.text = "";


        }

        private function fileRef_select(evt:Event):void {
            try {
                message.text = "size (bytes): "+ numberFormatter.format(fileRef.size);
                message.text += " | " + fileRef.name

                //Alert.show (fileRef.name);
                fileRef.load();

            } catch(err:Error) {
                message.text = "ERROR: zero-byte file";
            }
        }

        private function fileRef_progress(evt:ProgressEvent):void{
            progressBar.visible = true;
        }

        private function fileRef_complete(evt:Event):void{

            try {
                message.text += " (complete)";
                progressBar.visible = false;
                grid.initialize()               

                ba=fileRef["data"];
                xlFile.loadFromByteArray(ba);
                xlsheet = xlFile.sheets[0].values;

                hdrs =  xlsheet[0];
                xlsheet.removeItemAt(0);

                grid.dataProvider = xlsheet;
            } catch (err:Error) {
                message.text = "An error occurred";
            }

        }

        private function updateHeaders(): void {
            if(grid.columnCount>=1){
                for (var i:int=0; i<=grid.columnCount-1; i++){
                    grid.columns[i].headerText=hdrs[i];
                }

            }
        }

    ]]>

</mx:Script>

<mx:NumberFormatter id="numberFormatter"/>
<mx:Button label="Upload File"
           click="browseAndUpload();" labelPlacement="left"/>
<mx:Label id="message"/>
<mx:ProgressBar id="progressBar"
                indeterminate="true"
                visible = "false"/>

<mx:DataGrid id="grid"
    updateComplete="updateHeaders();"/>


</mx:Application>

Solution

  • The only error in your code is that the xlFile object is incremented each time you load a new stuff. So the sheets[0] is always the same! If your files have 3 sheets, then the first sheet of the new file is in the sheets[3] object.

    To correct this try to initiate the xlFile object every time you load a new file. I have done it by me and it works perfectly! Here is my code (I have wiped some lines to simplify it)

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                layout="vertical" 
                height="727" width="777" creationComplete="init()">
    
    <fx:Script>
        <![CDATA[
            import com.as3xls.xls.ExcelFile;
            import com.as3xls.xls.Sheet;
            import mx.collections.ArrayCollection;
    
            private var fileRef:FileReference;
            private var ba:ByteArray;
            private var xlFile:ExcelFile;
            private var hdrs:Array;
            private var runOnce:Boolean;
    
            [Bindable]private var xlsheet:ArrayCollection;
    
            private const XLS_FILTER:FileFilter = new FileFilter("EXCEL FILES (*.xls)", "*.xls");
    
            private function init():void 
            {
                fileRef = new FileReference();
                fileRef.addEventListener(Event.SELECT, fileRef_select);
                fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
                fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
    
                ba = new ByteArray();
                hdrs = new Array();
                xlsheet = new ArrayCollection();
            }
    
            private function browseAndUpload():void {
                fileRef.browse([XLS_FILTER]);
                message.text = "";
            }
    
            private function fileRef_select(evt:Event):void {
                try {
                    message.text = "size (bytes): "+ fileRef.size;
                    message.text += " | " + fileRef.name
                    fileRef.load();
                } catch(err:Error) {
                    message.text = "ERROR: zero-byte file";
                }
            }
    
            private function fileRef_progress(evt:ProgressEvent):void{
                progressBar.visible = true;
            }
    
            private function fileRef_complete(evt:Event):void{
                try {
                    xlFile = new ExcelFile();
    
                    message.text += " (complete)";
                    progressBar.visible = false;
    
                    ba=fileRef["data"];
                    xlFile.loadFromByteArray(ba);
                    xlsheet = xlFile.sheets[0].values;
    
                    hdrs =  xlsheet[0];
                    xlsheet.removeItemAt(0);
    
                    grid.dataProvider = xlsheet;
                } catch (err:Error) {
                    message.text = "An error occurred";
                }
            }
    
            private function updateHeaders(): void {
                if(grid.columnCount>=1){
                    for (var i:int=0; i<=grid.columnCount-1; i++){
                        grid.columns[i].headerText=hdrs[i];
                    }
                }
            }
    
        ]]>
    </fx:Script>
    
    <mx:Button label="Upload File" click="browseAndUpload();" labelPlacement="left"/>
    <mx:Label id="message"/>
    <mx:ProgressBar id="progressBar" indeterminate="true" visible = "false"/>
    <mx:DataGrid id="grid" updateComplete="updateHeaders();"/>
    </mx:Application>