Search code examples
javascriptdownloaddojodgrid

OnDemandGrid Dojo dgrid-select event listener not called after Form is submitted


I have an dgrid/OnDemandGrid. I also have a Drop Down menu which is used to download file (XLSX, XLS, and PDF file types).

On Click of Drop Down menu item, file is downloaded.

After the download, listener which is registered on OnDemandGrid for 'dgrid-select' event does not gets called at all.

dgrid-select event listener is called if Form is Not submitted but i dont have a way to download a file without submitting the form.

This is how grid is created.

 this.gridBoundaries = new (declare([Grid, Selection, Pagination, ColumnHider, Keyboard, ColumnResizer, editor]))({
                // use Infinity so that all data is available in the grid
                //className: "dgrid-autoheight",
                showHeader: true,  
                collection: self.memStore,
                bufferRows: Infinity,
                columns: columns,
                selectionMode: "single",
                pagingLinks: true,
                pagingTextBox: true,
                firstLastArrows: true,
                rowsPerPage: 100,
                pageSizeOptions: [100, 150, 200],
                adjustLastColumn : true,
                loadingMessage: 'Loading data...',
                noDataMessage: 'No data.'

            },this.domNode);
            this.gridBoundaries.startup();

Form Submit to download is trigger in the below code snippet

var formElement = dom.byId('exportForm');

                if(formElement){                     
                    domAttr.set(formElement, "action", generateReportUrl);
                    domAttr.set(dom.byId("reportType"), "value", reportType)
                    domAttr.set(dom.byId("selectedSite"), "value", this.selectedSite.FAC_IDU)
                    domAttr.set(dom.byId("columnMetaData"), "value", columnMetaDatas)
                    domAttr.set(dom.byId("selectedMarketArea"), "value", this.selectedMarketArea.MRKT_AREA)
                    domAttr.set(dom.byId("tabSelected"), "value", isCustomer)
                    //domAttr.set(dom.byId("polygonJSON"), "value", this.polygonJSON)
                    domAttr.set(dom.byId("currentTimeZone"), "value", this.currentTimeZone)
                    domAttr.set(dom.byId("zoneId"), "value", this.zoneId)
                    formElement.submit();
                }

Solution

  • I think you may be running into a peculiar and pretty terrible IE glitch where event listener bindings get shuffled after a "non-navigation" happens - by which I mean a navigation that doesn't actually send the browser window to a new location, e.g. <a href="javascript:..."> links... and file downloads.

    https://connect.microsoft.com/IE/feedback/details/802397/ie9-ie10-events-can-be-sent-to-the-wrong-listeners describes the issue more specifically. (I'm pretty sure I've seen it in IE11 as well.)

    To at least confirm if this is what you're running into, I'd suggest adding target="_blank" to the form element, so that it technically isn't navigating the current window.