Export FlexGrid dropdowns to excel?

Posted by: kyle.m.vassella on 9 November 2018, 8:38 am EST

    • Post Options:
    • Link

    Posted 9 November 2018, 8:38 am EST

    In FlexGrid, is it possible to export combobox dropdowns to excel, so that they appear in the downloaded excel file?

    Also, if our dropdowns are not created via combobox but are instead generated by a dataMap - are datamap dropdowns able to be exported to excel?

    Any special code that we need to accomplish this?

    Thanks!

  • Posted 11 November 2018, 5:14 pm EST

    Hi,

    Sorry, Form Controls (ComboBox/DataMap) are not exported from FlexGrid. This is not supported.

    ~nilay

  • Posted 21 January 2019, 8:30 am EST

    Hi Nilay,

    I had one more question for clarification on this.

    So I understand that an entire datamap dropdown or combobox cannot be exported to excel. But lets say I have datamapped values in my flexGrid for a ‘role’ column.

    In the database for this grid, the value for this ‘role’ would be ‘1’. But on the flexGrid, we have that ‘1’ datamapped to display ‘Admin’ instead.

    So the FlexGrid shows ‘Admin’ for role - but when we export this flexGrid to excel, the number ‘1’ shows up under role in the excel file - but I would like the datamapped value of ‘Admin’ to be exported to excel instead.

    Is this also not possible? AKA - export the datamapped values to excel (rather than export the entire datamap dropdown as I asked in my initial question).

  • Posted 21 January 2019, 4:43 pm EST

    Hi Kyle,

    As the default behaviour, FlexGrid exports the mapped values in the case of DataMap columns i.e. display value is exported instead of the underlying binding values.

    If in your grid, underlying values are exported instead of the display values then please make sure that values are not transformed using the formatItem function while exporting the grid.

    We also created a sample to verify the same behaviour and found that mapped values were exported as expected. Could you please have a look at the following sample and let us know if we are missing something to replicate the issue: https://stackblitz.com/edit/angular-c5fuyl?file=app%2Fapp.component.ts

    Also, please let us know the wijmo build version you are using so that we may test it on the same build.

    ~Sharad

  • Posted 12 February 2019, 11:41 am EST

    Hi Sharad,

    Thanks for the test example. This is still a problem for us in Angular 2. We are using WIJMO version 5.20181.462-rc.

    We plan to move away from the –rc version ASAP. However, if I change your stackblitz project’s WIJMO version to 5.20181.462-rc via the package.json file and save, your code still works in your example. I assume this is a good enough test to show that this should be working properly even in the –rc version?

    Our JSZIP is version 3.1.5

    I think for us, this has to do with how we are importing and using JSZIP. For example, we reference the JSZIP script in our index.html file:

      <!-- Export to Excel -->
      <script src="assets/wijmo/script/jszip.min.js"></script>
    

    Here is the code we are using:

    My.component.html:

    <wj-combo-box #cboOption [itemsSource]="['(options)','Export to Excel']" [isEditable]="false" (selectedIndexChanged)="cboOption_selectedIndexChanged($event, cboOption)">
    </wj-combo-box>
    

    My.component.ts:

        cboOption_selectedIndexChanged(p_event, p_control) {
            var strFileName = "Test.xlsx";
            var intOption = p_control.collectionView.currentPosition;
    
            switch (intOption) {
                case 1: // "Export to Excel"
                    this.m_wjcGridXlsx.FlexGridXlsxConverter.saveAsync(this.m_grid, { includeColumnHeaders: true, includeCellStyles: false, formatItem: null }, strFileName);
                    break;
            }
        }
    

    My.wijmo.parent.class: (perhaps we need something from the wijmo/wijmo.angular2 directory instead?) The rest of the Angular 2 imports are in another file not included here - the file below is imported into every component and lets us reference WIJMO items from one place. I’ve only included the imports and declarations of this file:

    import { OnInit, ViewChild, AfterViewInit } from '@angular/core';
    import * as wjcCore from 'wijmo/wijmo';
    import * as wjcGrid from 'wijmo/wijmo.grid';
    import * as wjcGridXlsx from 'wijmo/wijmo.grid.xlsx';
    import * as wjcGridFilter from 'wijmo/wijmo.grid.filter';
    import * as wjcGridDetail from 'wijmo/wijmo.grid.detail';
    
    
        public m_wjcCore = wjcCore;
        public m_wjcGrid = wjcGrid;
        public m_wjcGridXlsx = wjcGridXlsx;
        public m_wjcGridDetail = wjcGridDetail;
        public m_collectionView: wjcCore.CollectionView;    
        public m_detailCollectionView: wjcCore.CollectionView;
    

    And here is Excel’s error message when we first try to open the exported file:

    ‘We found a problem with some content in ‘test.xlsx’. Do you want us to try to recover as much as we can? If you trust the source of this workbook, click Yes.’

    Once you click ‘yes’, the grid loads but it does not have the datamapped front end values (it instead shows the corresponding numbers instead of our datamap text).

    In case this is not enough information, could you open up a ticket with me so that I could share more in depth code with you specifically?

    Thanks a lot,

    -Kyle Vassella

  • Posted 12 February 2019, 5:51 pm EST

    Hi Kyle,

    We are still unable to replicate the issue.

    We have created a case for this thread on SupportOne portal for you, please share the required details there. Following is the link for the case:

    http://supportone.componentone.com/casedetail/366720

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels