Adding new columns in new row

Adding new columns in new row

Posted by: nivishapanwar on 26 May 2021, 8:40 pm EST

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 26 May 2021, 8:40 pm EST

  Hello,
  
  I am using wijmo grid, how can I add new columns by clicking on add button.
  
  Like when we click on add, all the 5 columns get added.
  
  For example : My first column have dropdown values , other have number input etc.
  
  data: any;
  
  taValue = “value”;
  
  countries = ;
  
  constructor() {
  
  this.data = this._getData();
  
  this.countries = this._getCountries();
  
  }
  
  onClick() {
  
  if (!this.countries.includes(this.taValue)) {
  
  this.countries = […this.countries, this.taValue];
  
  }
  
  }

  private _getCountries() {
  
  return “US,Germany,UK,Japan,Italy,Greece”.split(“,”);
  
  }

  private _getData() {
  
  let countries = this._getCountries(),
  
  data = ;
  
  for (let i = 0; i < countries.length; i++) {
  
  data.push({
  
  id: i,
  
  country: countries[i],
  
  comments: “”,
  
  });
  
  }

  return data;
  

  }
  
  Thank you.
  
  Regards,
  
  Nivisha Panwar

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 May 2021, 12:11 am EST

  Hi,

  To achieve the required functionality you may handle click event on the button and inside its handler, you may create a new column instance and set its header and binding accordingly.
  
  For better understanding, you may refer to the below code sample -
  
  https://stackblitz.com/edit/angular-iuttds?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 31 May 2021, 7:28 pm EST

  Thanks Sharad for the help.
  
  Can you please suggest how to add a new row with all the columns present in the grid, like if I have 5 columns then when i add new row , all 5 columns are added to it also.

  Regards,
  
  Nivisha

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 2 June 2021, 5:08 am EST

  You may add new row using the addNew()/commitNew() methods of collectionView. Refer to the following code snippet and the sample demonstrating the same:

  let newItem = flexgrid.collectionView.addNew();
      // add some data if required
      newItem['country'] = 'India';
      flexgrid.collectionView.commitNew();
  

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