Adding new columns in new row

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

  • 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
  • Replied 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
  • Replied 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
  • Replied 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
Need extra support?

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

Learn More

Forum Channels