Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Export large grid to Excel at the client side

    Hello,
    We are using SmartClient_70rc2_Pro.

    We get data from server through RPCManger.sendRequest call, and use setData to populate the Grid. We use clientOnly data source for the filter to work. Since all the data are at the client side, and we enable grid sort and filter, it is easy to do the export directly at the client side, as it will be quite some extra work to keep track of the sort and filter at the server side. Our data are not directly retrieved from a database table.

    I’m thinking to directly export the data at the client side using ActiveXObject. But there is a warning dialog (saying “An Active X control on this page might be unsafe to interact with other parts of the page. Do you want to allow this interaction?”) pops up every time user do the export. The warning message might not be acceptable to our client. Plus, the export might not work because of user browser settings.

    Do you have any suggestions on how to export the data to Excel in this case?

    Thanks in advance.

    The following is a sample code showing our export is done:

    <HTML><HEAD>
    <SCRIPT>var isomorphicDir="../isomorphic/";</SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/skins/TreeFrog/load_skin.js></SCRIPT>
    </HEAD><BODY>
    <SCRIPT>

    try{
    ctAddButton.show();
    } catch (err) {
    isc.IButton.create({
    ID:"ctAddButton",
    title: "Export",
    width:100,
    top:50,
    left:200,
    click: function() {
    startExcel();
    }
    })
    }

    isc.DataSource.create({
    ID:"fsEnumDataSource",
    fields:[
    {name:"c0", title:"c0", width:100, type:"text", showHover:true},
    {name:"c1", title:"c1", width:100, type:"text", showHover:true}
    ],
    clientOnly:true
    });

    isc.ListGrid.create({
    ID: "ctDisplayDataGrid",
    showFilterEditor: true,
    filterOnKeypress: true,
    canPickFields:false,
    left:100,
    top:100,
    autoFitFieldWidths:true,
    autoFetchData:true,
    canReorderRecords: true,
    autoDraw:true,
    dataSource:"fsEnumDataSource"
    });

    var MAX_COL = 2;
    var MAX_ROW = 4;

    var data = Array.create();
    for ( r=0; r<MAX_ROW; r++){
    row = Array.create();
    for ( i=0; i<MAX_COL; i++){
    row["c"+i]="row"+r+"col"+i;
    }
    data.add(row);
    }

    ctDisplayDataGrid.setData(data);
    fsEnumDataSource.testData=data;

    function startExcel() {
    var xls = new ActiveXObject ( "Excel.Application" );
    xls.visible = true;

    var excelSheet = xls.Workbooks.Add;
    excelSheet.Worksheets.Add;
    excelSheet.Worksheets(1).Activate;

    for(i=0; i<ctDisplayDataGrid.fields.length; i++){
    excelSheet.Worksheets(1).Cells(1, i+1).value=ctDisplayDataGrid.fields[i].title;
    }

    var row = null;
    var j = 0;
    for(i=0; i<ctDisplayDataGrid.data.length; i++){
    row = ctDisplayDataGrid.data[i];
    for(j=0; j<ctDisplayDataGrid.fields.length; j++){
    excelSheet.Worksheets(1).Cells(i+2, j+1).value=row["c"+j];
    }
    }

    excelSheet.Worksheets(1).Name="Custom Report";
    }


    </SCRIPT>
    </BODY></HTML>
    Tags: None
    #2
    You need to switch over to using a server-side DataSource (.ds.xml file). This is what you should have done in the first place, and does not imply direct database access or the need to implement server-side sort and filter. Just take your server-side logic that you are currently calling via RPCManager and made it a DMI the returns data - see the QuickStart Guide for details.

    Once you've completed this, all you need to do is call ListGrid.exportClientData() to accomplish export.

    Comment

      #3
      Thanks for the suggestions. We are using SmartClient_70rc2_Pro. Is method ListGrid.exportClientData supported in this version? I've searched the distribution and didn't find it. Please confirm.

      I'm able to make it work using ListGrid.exportClientData with a clientOnly datasource with SmarClient version: SmartClient_SC_SNAPSHOT-2011-01-06, but we might not want to upgrade the SmartClient just to get the exportClientData.

      Comment

        #4
        No, exportClientData() isn't part of 7.0, you would need to upgrade to get it.

        Comment

        Previous template Next
        Working...
        X