userRowSelect don't work on first click

[kazzkiq]

It seems that in every first click in the grid, the userRowSelect event simply gets ignored. The next clicks (in any rows) work as expected.

No error is fired. This issue happens with any rows (first click in any row don't trigger, then next clicks in any rows start to work normally).

View code

<ng2-smart-table [settings]="settings" [source]="gridSource" (userRowSelect)="handleGridSelected($event)"></ng2-smart-table>

Controller code

export class NiveisListarComponent extends CRUD implements OnInit {
  gridSelected;
  gridSource: LocalDataSource;
  gridData: object[];
  settings = Grid.basicConfigWithName();

  constructor(
    router: Router
  ) {
    super(router);
  }

  ngOnInit() {
    this.getDataFromAPI();
  }

  handleGridSelected(event) {
    this.gridSelected = event.selected[0];
    console.log(this.gridSelected);
  }

  getDataFromAPI() {
    this.Request.get(this.URL_CRUD_ENDPOINT)
    .then((res) => {
      this.gridData = res.data;
      this.gridSource = new LocalDataSource(this.gridData);
      this.gridSource.refresh();
    });
  }
}

Package.json dependencies (pkg versions)

"dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular-2-dropdown-multiselect": "^1.4.2",
    "animate.css": "^3.5.2",
    "axios": "^0.16.2",
    "core-js": "^2.4.1",
    "diacritics": "^1.3.0",
    "ng2-smart-table": "^1.2.1",
    "tinymce": "^4.6.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.1",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "jeet": "^7.1.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.0",
    "sass-loader": "^6.0.5",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }

Visual reproduction of the bug:

(First click don't fire the event, then next clicks work normally)

[Squadrone61]

+1, what i see here is that the first row is already selected in the first place (if you start with clicking another row, it works fine). With your first click, you unselect the first row. gridSelected is empty. disabled buttons.

[kazzkiq]

@Squadrone61 It is theoretically selected, but the .selected class isn't added until I click two times in the grid.

[Squadrone61]

@kazzkiq ng-class and ng-reflect are the things to check here. Because after click the tr also gets the class ng2-smart-row.

• One thing i am sure is that there's nothing wrong with the event. It fires as expected.

• In lib/data-set.js you can see that the first row is selected by default.

[kazzkiq]

@Squadrone61 Exactly.

And one thing I noticed is that in the example pages the rows come selected (both in the "code" and visually). But when I use the component on my project this odd behavior starts to happen.

I believe there are two possibilities:

1. The code of the examples is using an older version of the component that hadn't this issue;
2. There is something wrong with my configuration (which you can check in the first comment of this thread).

This is a behavior that definitely will raise questions once my project hits production, so I guess I will have to put some time to discover what exactly is happening.

[Squadrone61]

i've managed to deselect first row using

<ng2-smart-table #grdTags [settings]="settings" [source]="source"</ng2-smart-table>

var row = this.grdTags.grid.dataSet;
row.deselectAll();

• problem is that i can do it with a button, but i don't know when the source loads(so that i would use it there).

• Visually, its been bothering me too. Since i started using it.

[kazzkiq]

@Squadrone61 I couldn't make it work. It seems this.grdTags has no grid, dataSet or deselectAll() functions.

[Squadrone61]

@kazzkiq make sure you have the latest version. I have "ng2-smart-table": "^1.2.1"

[kazzkiq]

I have exactly the same version: "ng2-smart-table": "^1.2.1".

Here is the grid in my view:

<ng2-smart-table [settings]="settings" [source]="gridSource" (userRowSelect)="handleGridSelected($event)" #grdTags></ng2-smart-table>

And here is the code in my controller (where I try to add your code):

// ...
@ViewChild('grdTags') grdTags;

getDataFromAPI() {
    this.Request.get(this.URL_CRUD_ENDPOINT)
    .then((res) => {
      this.gridData = res.data;

      this.gridSource = new LocalDataSource(this.gridData);

      const row = this.grdTags.grid.dataSet;
      row.deselectAll();
    });
  }

// ...

Oddly enough, if I do console.log(this.grdTags) it returns undefined.

[Squadrone61]

@kazzkiq what i did, view:

<ng2-smart-table #grdTags [settings]="settings" [source]="source"></ng2-smart-table>
<button class="btn btn-primary" (click)="btnNewClick()" >btn</button>

class:

@ViewChild('grdTags') grdTags;
 private source:ServerDataSource;
constructor(private authHttp: AuthHttp) {
    this.source = new ServerDataSource(authHttp, 'x', {endPoint: y'});
}

  btnNewClick(){
    var row = this.grdTags.grid.dataSet;
    row.deselectAll();
  }

im not sure whats wrong, im not really good at angularjs :)

[kazzkiq]

As you mentioned, in lib/data-set.js, by changing this.willSelect to 'none' prevents premature selection, thus preventing the issue from happening.

More details in my post on #502.

[bhaveshshah]

As of now we can solve the issue by

HTML : <ng2-smart-table [settings]="settings" [source]="gridSource" (userRowSelect)="handleGridSelected($event)" #grdTags></ng2-smart-table>

TS: @ViewChild('grdTags') grdTags;

After Grid Initialization.

this.grdTags.grid.dataSet.willSelect = 'false';

though this is not a valid way to do but at least its stopping the first row auto selection, till the time the devs are fixing it this can help us to move the code to production.

[sanathpathiraja]

@bhaveshshah nice work

[hope4555]

this ugly code selects the first row (or any row)

private selectFirst() { if (this.source.count() <= 0) { return; }

    setTimeout(() => {
        const rows: Row[] = this.smartTable.grid.getRows();
        if (rows.length > 0) {
            const row: Row = rows[0];
            row.isSelected = false;
            setTimeout(() => {
                this.smartTable.grid.selectRow(row);
            }, 500);
        }
    }, 500);
}

[jupmorenor]

This comment solves the issue: https://github.com/akveo/ng2-smart-table/issues/502#issuecomment-876178945