CODEWITHSUNDEEP
angularslickgridangular-slickgrid
user2810718
user2810718

Reputation: 71

How to set last added row as selected in Slickgrid

I am adding a new row to slickgrid as follows:

this.dataset.push(
      {
        id: idObjet,
        id_objet: idObjet,
        name: ElementType[elementType] + '-' + idObjet.toString(),
        type: ElementType[elementType],
        delete: 0,
      }
    );

    this.angularGrid.dataView.refresh();

At this point I want to highlight this row. So I first retrieve the index of this row:

const rowIndex = this.dataView.getIdxById(id);

I then try to set this row as selected using:

this.slickGrid.setSelectedRows([rowIndex]);

However it does not highlight/select the last added row. This command works on any other existing rows in the grid.

Is it that since the rowview has not been rendered yet, it cannot be selected? Is ther a workaround?

Upvotes: 0

Views: 638

Answers (1)

ghiscoding
ghiscoding

Reputation: 13194

Note that I'm the author of Angular-Slickgrid

You can use the addItem method from the Grid Service, it will highlight the row by default. Take a look at this Example, this will not however select the row by default but there's extra option on that method which you can use selectRow: true

For that Example I mentioned, here's the code to do it. 

angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.dataView = angularGrid.dataView;
    this.grid = angularGrid.slickGrid;
    this.gridService = angularGrid.gridService;
}

addNewItem(insertPosition?: 'top' | 'bottom') {
    const newId = this.dataset.length;
    const randomYear = 2000 + Math.floor(Math.random() * 10);
    const randomMonth = Math.floor(Math.random() * 11);
    const randomDay = Math.floor((Math.random() * 29));
    const randomPercent = Math.round(Math.random() * 100);

    const newItem = {
      id: newId,
      title: 'Task ' + newId,
      duration: Math.round(Math.random() * 100) + '',
      percentComplete: randomPercent,
      percentCompleteNumber: randomPercent,
      start: new Date(randomYear, randomMonth, randomDay),
      finish: new Date(randomYear, (randomMonth + 2), randomDay),
      effortDriven: true
    };
    this.angularGrid.gridService.addItem(newItem, { position: insertPosition, selectRow: true });
  }

Please note that the addItem only support a position of top or bottom (which basically will insert on first row or last row in the grid).

If you really wish to insert the row at a specific row index in the grid, then you'll have to look at how I've implement this addItem method here. All the methods in the Grid Service are basically just helper methods, they all use the SlickGrid & DataView methods to do the final execution. Also note that the highlight is a bit more tricky to deal with, you need to use SlickGrid MetaData to change CSS classes (add/remove css class for a second) on that row in order to simulate a highlight, so that is another reason to simply use the Grid Service.

Upvotes: 1

Related Questions