Ngx-datatable: New Feature Request: Ability to "select" a row programmatically.

[allen0977]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ x ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Unable to programmatically "Select" a row. In order to perfom the "Select" operation, the user must click the row.

Expected behavior

Within the TS file, I'd like to perform a "Select" operation on a specific row, and have it "Open" the details of that row. I would like to be able to SAVE the selected row parameter, perform an update of the underlying this.rows, and then reselect the previously selected rows.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

In my application, the rows display summary data for multiple months worth of information. Upon selecting a row, it opens a detailed datatable, that shows projects and values for expanded for the same months. Within the details table, users can interact with the data and update values, which commit to the database. A refresh of the original data table data will force the detail view to close. I would like to keep it open (or at the very least be able to "reselect" the record that was open in the first place).

Please tell us about your environment:

Mac, Sublime/Ultra Edit, npm, node, etc.

• Table version: 0.8.x
  
  11.0.2 is the current version I'm using, this is a new feature request not found in older versions.

• Angular version: 2.0.x
  
  5.0.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  
  All

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  all

[nhducseuit]

The DatatableComponent object should allow you to do that.

Assume that you already have object row that you want to select it from ts file, and by using @ViewChild query you able to obtain an instance of the table named datatable

In order to select the row from ts, do this:

this.datatable.selected.push(row);

In order to navigate to a page with specific selected row info, just use Angular router feature, like:

this.router.navigate(['app/detailpage', row.id]);

[ashishpok]

@nhducseuit solution seem to need at least another keyboard action - meaning it sets the selection only after I hit key up/down etc. Is there is way to refresh? I tried pushing rows back into the table with rows = [...rows] and that didnt seem to work either.

[nhducseuit]

I don't get your context. My suggestion doesn't imply that it requires a keyboard action to work. Can you describe your case with stackblitz?

[ashishpok]

@nhducseuit disregard my comment. I didnt look (active) trigger closely - it was sending element which actually lost focus rather than element which had focus. I was selecting a row based on that event and got all confused. Thanks for getting back.

[ArfanMirza]

Working solution...

<ngx-datatable class="material expandable" #myTable ...>
@ViewChild('myTable') table: any;
**this.table.rowDetail.toggleExpandRow(row);**

[zengchuan]

keyboard not action @ArfanMirza

@ViewChild('myTable') table: any;

ngOnInit() {
let self = this;
if(this.rows.length > 0){
this.selected.push(this.rows[0]);
setTimeout(function () {
self.table.rowDetail.toggleExpandRow(self.rows[0]);
})
}
}

[ArfanMirza]

@zengchuan you need "self" variable hack, when you use are accessing class variable/method inside a block, like one you specify
setTimeout(function () {})
, there are other JS code-block too, where you need self instead of this.. For example pure JS click event , or element access by JS etc

I just write the solution according to Typescript or Angualr2 ..

[zengchuan]

update demo code add ngOnInit . keyboard not action @ArfanMirza

[sengemann]

Any updates on this?

[cchnlkchan]

I see this is still open. I was looking for the same issue as you but the solution here. You can find the code in demo here.

[edjm1971]

@cchnlkchan Are you able to update your demo to include a 2nd component that when you click it, it will select another row? I'm struggling with getting an external component to reflect a row that should be selected programmatically. In my code once I mouse over the datagrid it will then update on its own and show what is selected externally.

[edjm1971]

To clarify what I'm doing.
I have a Data Table component displayed above a Leaflet Map.
Each row within this Data Table represents a Geo Point on the map.
I can select a row from the Data Table and plot a new Geo Point to show it is selected.
I am trying to select from the Map the Geo Point and have the Data Table reflect that the row is selected.
I can select the Map Geo Point and create in the map the highlight and I can set the value for the binding variable in the Data Table.
The issue is that the Data Table does not highlight the row for the selection made in the map UNLESS I mouse over the Data Table.

Really could use some guidance. My codebase is on a different computer and so I am not able to copy and paste anything.

[Linux4ever]

@edjm1971 Try look at the demo code to see how they are auto selecting the 3rd row on start. Instead of doing it on start you want to do it on map click event.
https://github.com/swimlane/ngx-datatable/blob/master/src/app/selection/selection-single.component.ts

After you select the map, you need to find out which row in the table reflect the map select. And set the this.selected = [tabledata[rownumber]];

declare variable:
selected = [];

My guess you have map click function(){
...
// find rownumber where the data is in table
this.selected = [tabledata[rownumber]]; //this should highlight your table.
}

html:
The import line is [selected]="selected" which binds to selected variable.
class="material"
[rows]="rows"
[columnMode]="ColumnMode.force"
[columns]="columns"
[headerHeight]="50"
[footerHeight]="50"
rowHeight="auto"
[selected]="selected"
[selectionType]="SelectionType.single"
(activate)="onActivate($event)"
(select)="onSelect($event)"
>

Hope this helps.

[edjm1971]

@Linux4ever I appreciate you posting.

What I have is the Map makes a call to a service which updates what is and is not marked as selected and then triggers an observable. Both the Map and the DataTable are subscribed to the service in order to get updates as to what is selected. Debugging in FireFox, I can see that the value for selected is updated in the DataTable and has the object for the row.

BUT, the DataTable will not highlight unless I mouse over the DataTable. I've been battling this since early last week.

I can make multiple selections in the Map and they will not show up either in the DataTable until I mouse over the DataTable. Then all the rows will highlight at that point.

[edjm1971]

I see this is still open. I was looking for the same issue as you but the solution here. You can find the code in demo here.

The solution in this link is only for the DataTable itself.

How would one cause a selection to occur from outside of the DataTable?
See my notes on issue I'm having above that deal with setting the selected but highlights will not occur until the DataTable is moused over.

[edjm1971]

I was able to get the DataTable to update based upon externally made selections.
After setting what I wanted selected I had to trigger Angular to detect the change.
StackOverflow https://stackoverflow.com/questions/60599248/how-to-get-datatable-to-select-highlight-from-external-selection-without-setting

import {NgZone} from '@angular/core';
constructor(private ngZone: NgZone) {}
//...
this.ngZone.run(() => this.tableRef.selected = this.newRowSelection);