Switch to local pageModel for Excel Export

[TonyLeech]

Normally I use 'remote' type for pageModel so I reduce the amount of data traffic to load into each page.  But when the customer wants to export to Excel only the current page view is exported (e.g. 50 rows).  To work around this I have page options dropdown selector for up to 1000 rows, but it is still not very convenient.

I am trying to switch temporarily to pageModel type: 'local' just before the Excel export, refresh the grid to load all rows from the remote database, and then switch back to pageModel type: 'remote' for normal operation again.

I have tried...

Code: [Select]


        myGrid.on("beforeExport", function (evt, ui) {
pageModel.type = 'local';
this.option( "pageModel", pageModel);
this.refreshDataAndView();
});

myGrid.on("exportData", function (evt, ui) {
pageModel.type = pageModelType;    //pageModelType is just a variable set to 'remote'
this.option( "pageModel", pageModel);
this.refreshDataAndView();
});

...but the exported data is still just 50 rows instead of 50000.  Do I need to apply code for a listener for the grid data to be refreshed following the "beforeExport" event?

Can you guide me please?

[paramvir]

It's exporting 50 rows only because export of data from grid ( not including the round trip to server ) is synchronous process while loading of data from server after switch of pageModel.type is asynchronous.

So you could wait for remote data to load ( after switch of pageModel.type ), then export data and switch back to local after that.

[TonyLeech]

So the only event I found for triggering when the new data is loaded is the load event "load( event, ui )".  I pulled the export code out of the toolbar listener and put it into the load event instead.  The toolbar export button now sets a global 'exporting' flag and changes the page mode.  All as below.  It works fine, but I wondered if I've overlooked a better way for example adding the load event listener into the toolbar function as a callback?  Thanks for your advice or suggestions if you have time.

Code: [Select]

{
type: 'button',
label: "Export",
icon: 'ui-icon-arrowthickstop-1-s',
listener: function () {
pageModel.type = 'local';
this.option( "pageModel", pageModel);
bExporting = true;
this.refreshDataAndView();
}


Code: [Select]

myGrid.on("load", function (evt, ui) {
if (bExporting) {
var format = $("#export_format").val(),                           
blob = this.exportData({
//url: "/pro/demos/exportData",
format: format,                               
render: true
});
if(typeof blob === "string"){                           
blob = new Blob([blob]);
}
saveAs(blob, "PartMaster."+ format );
bExporting = false;
pageModel.type = pageModelType;
this.option( "pageModel", pageModel);
this.refreshDataAndView();
}
});


[paramvir]

To avoid globals, use one() to bind load event within the listener.

Code: [Select]

listener: function () {
  //switch pageModel.type.
  this.option( "pageModel.type", 'local' );
  this.one('load', function(){
    //do the export stuff.
    //and revert back the pageModel.type
  }
  this.refreshDataAndView();
}


[TonyLeech]

Thank you for showing me how to put the functionality back into the toolbar button.  It makes a lot more sense to keep that functionality with the button and remove the globals.  The style you showed works well and keeps the code/structure much more readable.