Programmatically select a row ag-grid + angular 2

user_5224343 0
Viewed 35792

Trying to select first row by default in ag-grid. As per ag-grid documents, I should be able to do this using NodeSelection Api(https://www.ag-grid.com/javascript-grid-selection/?framework=all#gsc.tab=0). But I am not able to get to node object at all. HTML file 

<div class="pulldown panel panel-default">
          <div class="panel-heading">{{rulesSummaryTitle}}</div>
          <ag-grid-angular #agGrid   class="ag-fresh ag-bootstrap"
                           [gridOptions]="gridOptions"
                           [rowData]="rowData"
                           [columnDefs]="columnDefs"
                           [enableSorting]="true"
                           rowSelection="single"
                           [pagination]="true"
                           [suppressCellSelection]="true"
                           (gridReady)="onGridReady($event)"
                           (rowSelected)="onRowSelect($event)">
          </ag-grid-angular>
      </div>

I am calling node selection api in "onGridReady" method but errors out with error message "cant call setSelected on undefined".

public onGridReady(event: any): void {
    event.api.sizeColumnsToFit();
    this.gridOptions.api.node.setSelected(true);
  }
ag-grid angular
7 Answers

We need to call the setSelected(true) method to select the row node. The main problem is to get the row node.

We can get the row nodes by calling the getRenderedNodes() method. According to the doc,

Retrieve rendered nodes. Due to virtualisation this will contain only the current visible rows and those in the buffer.

So, we will get the first row node at index 0 of the array returned by the getRenderedNodes() method. The implementation will be the following-

public onGridReady(event: any): void {
  let nodes = event.api.getRenderedNodes();
  if (nodes.length) {
    nodes[0].setSelected(true); //selects the first row in the rendered view
  }
}

Here's the working plunker demo: https://plnkr.co/edit/J40sUeDSwyDEi76X

user_46735580

aggrid on ready function is not proper for this transact. agon ready just drawing table if you want manipulate data you have to approach before ag ready. but there is no option for this.if you add this code on your methods. 

getProducts: async function() {
      let data = await repository.getAll("Product").then(r => r.list);
      for (let i = 0; i < this.value.length; i++) {
        for (let j = 0; j < data.length; j++) {
          if (this.value[i].productId == data[j].productId) {
            let x = data.splice(j, 1)[0];
            data.unshift(x);
            break;
          }
        }
      }
      this.productDataForAggrid = data;
      this.gridApi.setRowData(this.productDataForAggrid);
      window.watcher = setInterval(this.setSelectedItems, 50, this.gridApi);
    }

this function is normal get method except last part. İf you selected some rows on ag and if you close ag all selection will deleted on the table but you stıll have which data selected on your data property when you openin ag again. You will fallow this way.this part of code for real ready function i mean before preparation of data. 

setSelectedItems(api) {
      if (this.productDataForAggrid.length == api.getDisplayedRowCount()) {
        for (let i = 0; i < this.value.length; i++) {
          let node = api.getRowNode(this.value[i].productId.toString());
          if (node) {
            node.setSelected(true);
          }
        }
        this.gridApi.sizeColumnsToFit();
        clearInterval(window.watcher);
        window.watcher = 0;
        //console.log("ready!");
      }
    }

firstly we will add all selected data on value prop for adding to billing list. But if customer wants to reopen product select aggrid again customer cant see the selected products. This getproducts func work for everytime on ag open. and getting all products. compare this data with our value property. and sending to setSelectedItems funciton for check selected.


 saveSelectedProducts() {
      this.value.splice(0, this.value.length);
      for (var i = 0; i < this.gridOptions.api.getSelectedRows().length; i++) {
        if (this.gridOptions.api.getSelectedRows()[i].sellPrice === undefined)
          this.gridOptions.api.getSelectedRows()[
            i
          ].sellPrice = this.gridOptions.api.getSelectedRows()[i].odooId;

        if (this.gridOptions.api.getSelectedRows()[i].piece === undefined)
          this.gridOptions.api.getSelectedRows()[i].piece = 1;

        this.value.push(this.gridOptions.api.getSelectedRows()[i]);
      }
      //this.$emit("selectedProductsList", this.value);
      this.openProductPopup = false;
    },
user_108260570

setSelected(false) can be called on (selectionChanged) event .

One of the grid events available on ag grid public methods

user_164414550
Related