Angular2 FlexGrid. Clone column

Angular2 FlexGrid. Clone column

Posted by: sicrum on 24 April 2019, 2:28 am EST

• 

  sicrum

  • Post Options:
  • Link
    Copy

  Posted 24 April 2019, 2:28 am 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.

• 

  sicrum

  • Post Options:
  • Link
    Copy

  Posted 25 April 2019, 5:31 am EST

  Hello. Any input from support ?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 25 April 2019, 7:31 am 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

• 

  sicrum

  • Post Options:
  • Link
    Copy

  Posted 25 April 2019, 7:39 am EST

  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.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 April 2019, 6:42 am 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

• 

  sicrum

  • Post Options:
  • Link
    Copy

  Posted 26 April 2019, 7:32 am EST - Updated 3 October 2022, 3:28 pm EST

  What if some columns have ng-template? How access and copy template? This is main problem here…

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 April 2019, 8:15 am 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