Delete column: wijmo grid deleting column

Delete column: wijmo grid deleting column

Posted by: siddushar on 6 January 2019, 2:59 pm EST

• 

  siddushar

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 January 2019, 2:59 pm EST

  Is there any way to deleting column from wijmo grid. How can i delete columns dynamically using wijmo grid in angular 2.
  
  Any help would be approciated

  Thanks

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 7 January 2019, 8:09 am EST

  Hi,
  
  You may add the columns dynamically by adding the columns to the column definition.
  
  Please find the updated code snippet:
  
  https://stackblitz.com/edit/angular-8kxvew?file=app/app.component.ts

  Further, in the column collections, you may hide the column from FlexGrid by setting the visible property to true and remove the column by calling remove method.

  For reference, please go through the following documentation and sample:
  
  https://demos.wijmo.com/5/Angular2/DynamicColumns/DynamicColumns/[/ur]
  
  https://demos.wijmo.com/5/Angular2/ColumnPicker/ColumnPicker/
  
  https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.ColumnCollection.Class.html

  Further, in the FlexGrid for Angular2 framework, the only Columns will be displayed for which wj-flex-grid-column is defined with binding. To add a blank column, do not set the binding property. ’

  Hope it clears!

  ~Manish

• 

  siddushar

  • Post Options:
  • Link
    Copy

  Posted 8 January 2019, 2:50 am EST

  HI Manish,

  Thanks for your replay.

  How can i delete entire column once it is hidden from grid. In following example https://stackblitz.com/edit/angular-8kxvew?file=app/app.component.ts

  how can i delete speficic columns from data or itemsource data.
  
  My scenario is when remove column from wijmo grid and submit changes, the removed column should not go to backend service.once column is removed, its related data should be removed from itemssource-data.

  How can i do that…?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 8 January 2019, 4:11 am EST

  To delete the column data even from the source collection, we need to iterate over each item in the collection delete the required property.
  
  Please refer to the following code snippet and sample:

  delCol(grid, colBinding){
      if(!colBinding){
        return;
      }
      let cv = grid.collectionView;
      cv.sourceCollection.forEach(item => {
        delete item[colBinding];
      });
  
      // data deleted now remove column from grid too
      let col = grid.columns.getColumn(colBinding);
      if(col){
        grid.columns.remove(col);
      }
    }
  

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

  ~Sharad

• 

  siddushar

  • Post Options:
  • Link
    Copy

  Posted 8 January 2019, 6:00 am EST

  Thanks sharad, this solution working for me