IgxGrid Dropdown Values Not Persisting After Reload

Hello,

 

I have an igx-grid with batch editing. One of the columns of the grid is with a dropdown list.

The data of the grid is derived from a database. The changed values of the column with dropdown list are added to the transactions, but when I reload the page, the cell values in the column with dropdown are empty.

How can I set the value of each row of drop down list, something similar to default value, but in my case I have different values for different rows.

The problem is that when the page is reloaded, the values of the column with a dropdown list is never changed and is always null and each cell of the column with dropdown list has a different value.

  

  
    

      
        {{ item }}
      
    
  

Here is my typescript:

public selected = "null";

  public selectCountry(rowid:any,item: any) {   
    for (let i = 0; i < this.posts.length; i++) {
      if (this.posts[i].country == rowid) {

        const editTransaction1: Transaction = {
          id: this.posts[i].country,
          type: TransactionType.UPDATE,
          newValue: { town: item + "" }
        };

        this.grid1.transactions.add(editTransaction1, this.posts[i])
      }
    }
  }

  public fruits: string[] = ['Apple', 'Orange', 'Banana'];

  public getCountryValues(cell: IgxGridCellComponent) {
    if (cell) {
      return this.fruits;
    }

    return [];
  }

I am using ignite ui version 12.1.4.

Hello Silvia,

Thank you for posting to Infragistics Community!

I have been looking into your question and created a small sample with an IgxGrid with batch editing enabled, containing an IgxSelect as cell editor, similar to the provided markup. The “City” column has a default value for each row, set to one of the values in the “cities” array.

Looking at your code, I can see that the click event of each igx-select-item is handled, so that the selection is reflected. However, I could suggest omitting this logic, as what would suffice for the change to be reflected is binding the igx-select’s ngModel to cell.editValue. Please, check out the linked sample for reference.

Regarding restoring the modifications on reaload, please make sure that they have been saved at the DB before reloading and then when reloading, the modified and stored data has to be retrieved from there. For the purposes of the example, in the sample the data is saved into the browser’s local storage when pressing the “Commit” button. If you try reloading the page after having made some modifications on the “City” column and commited, you will observe the new values properly getting restored.

Please, test the suggested sample on your side and if you require any further assistance on the matter, please let me know.

Sincerely,
Bozhidara Pachilova
Associate Software Developer