Angular2 FlexGrid. Clone column

Posted by: sicrum on 23 April 2019, 5:28 pm EST

  • Posted 23 April 2019, 5:28 pm EST

    Hello

    Is there any way to copy column from one FlexGrid to another?
    Or copy entire FlexGrid?

    I have a FlexGrid created programmatically and I need it to add there some columns from existing FlexGrid.

    Tried to copy all important properties of Column objects, but it seems that it is impossible to copy column template.
  • Replied 24 April 2019, 8:31 pm EST

    Hello. Any input from support ?
  • Replied 24 April 2019, 10:31 pm EST

    Hi,

    You could use the columnLayout property of Flexgrid to get the layout of the column and then create a new column in the other flexgrid using the above column's properties. Please refer to the following code snippet and sample below:
    var col = mainGrid.selection.leftCol;
    var layout = JSON.parse(mainGrid.columnLayout).columns[col];
    childGrid.columns.push(new wjcGrid.Column(layout));


    https://stackblitz.com/edit/angular-6uyxon?file=src%2Fapp%2Fapp.component.ts

    >>but it seems that it is impossible to copy column template
    Could you please explain some more about your requirement like
    • is it wjFlexGridCellTemplates that you want to copy?
    • is it already known which type of templates we need to copy like cellEdit or cell?

    ~Sharad
  • Replied 24 April 2019, 10:39 pm EST

    sharad.tomer said:

    Could you please explain some more about your requirement like


    What I am trying to do is exporting to Excel.

    We have a FlexGrid but it contains only a single page of data. In other words there is server side pagination.
    But we need to export all the data to Excel. And it should be flexible code that will work wih different grids.

    So what we do:
    1) Create new FlexGrid dynamically
    2) Take all columns from original FlexGrid and put into a new FlexGrid
    3) Load all the data from the server and put it into a new FlexGrid
    4) Export do Excel and dispose new FlexGrid

    Exporting itself works well but columns disappear from original FlexGrid...
    I think this is because Step 2 where columns are put into another FlexGrid.
    That's why I need to create a copy of column.
  • Replied 25 April 2019, 9:42 pm EST

    Hi,
    In this case, you may request to the server and fetch data. After fetching complete data request, you may create the temporary FlexGrid and get columnLayout from the original FlexGrid and bind with data.
    After exporting, dispose the temporary FlexGrid.
    Please refer to the following sample:
    https://stackblitz.com/edit/angular-msqbjs

    Regards,
    Manish Gupta
  • Replied 25 April 2019, 10:32 pm EST

    manish.gupta said:
    Hi,
    In this case, you may request to the server and fetch data. After fetching complete data request, you may create the temporary FlexGrid and get columnLayout from the original FlexGrid and bind with data.
    After exporting, dispose the temporary FlexGrid.
    Please refer to the following sample:
    https://stackblitz.com/edit/angular-msqbjs

    Regards,
    Manish Gupta



    What if some columns have ng-template? How access and copy template? This is main problem here...
  • Replied 25 April 2019, 11:15 pm EST

    Hi,
    By default, CellTemplate is not applied on exported Excel file. For this, we required to handle the formatItem option with callback method same as following demo sample:

    https://demos.wijmo.com/5/Angular2/ExcelImportExport/ExcelImportExport/FlexGridImportExport.htm

    If you are using the formatItem option, you need to create a hidden FlexGrid with dynamic columns and CellTemplate and export data using this hidden Flexgrid.

    Regards,
    Manish Gupta
Need extra support?

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

Learn More

Forum Channels