Row select does not work

I’m submitting a … (check one with “x”)

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

Current behavior (select) operation in ngx-datatable does not work although (activate) works properly

Expected behavior This is my template : `

<div class="row">

   <ngx-datatable
    class="material"
    [columnMode]="'force'"
    [count]="page.totalElements"
    [cssClasses]="iconClasses"
    [externalPaging]="true"
    [externalSorting]="true"
    [loadingIndicator]="loading"
    [rows]="rows"
    [headerHeight]="30"
    [footerHeight]="50"
    [messages]="messages"
    [limit]="page.size"
    [offset]="page.pageNumber"
    [selectionType]="single"
    [sortType]="multi"
    [rowHeight]="'auto'"
    (page)="setPage($event)"
    (sort)="onSort($event)"
    (select)="onSelect($event)"
    (activate)="onActivate($event)"
    [selected]="selected">

    <ngx-datatable-column name="fullId" prop="dynamicProperties.fullId">
        <ng-template let-column="column" ngx-datatable-header-template>
               {{'activity.TicketNumber' | translate}}
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="owner"  prop="dynamicProperties.owner">
        <ng-template let-column="column"  ngx-datatable-header-template>
               {{'activity.Owner' | translate}}
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="taskText" prop="dynamicProperties.taskText">
        <ng-template let-column="column" ngx-datatable-header-template>
               {{'activity.TaskText' | translate}}
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="title"  prop="dynamicProperties.title">
        <ng-template let-column="column" ngx-datatable-header-template>
               {{'activity.Title' | translate}}
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="activityCreated" prop="dynamicProperties.activityCreated">
        <ng-template let-column="column" ngx-datatable-header-template>
               {{'activity.Date' | translate}}
        </ng-template>
        <ng-template  ngx-datatable-cell-template>
            {{ value | jalali : 'jYYYY/jM/jD HH:mm' }}
        </ng-template>
    </ngx-datatable-column>
    

  </ngx-datatable>
</div>

` And this is my component :

` export class ActivityComponent implements OnInit {

dbContext: Isonet.Container;
rows = new Array<Isonet.TxpEnterprise.Web.Api.Entities.Activities.activityListItem>();
sortItems: Sort[] = new Array<Sort>();
selected = [];
itemsDB: any;
page = new Page();
loading: boolean = true;
iconClasses = {
        sortAscending: 'datatable-icon-up',
        sortDescending: 'datatable-icon-down',
        pagerLeftArrow: 'datatable-icon-left',
        pagerRightArrow: 'datatable-icon-right',
        pagerPrevious: 'datatable-icon-prev',
        pagerNext: 'datatable-icon-skip'
    };
 messages = {
               emptyMessage: this.translate.getTranslation('activity.NoData'),
               totalMessage: this.translate.getTranslation('activity.TotalItems')
              }

constructor(public isonetservice: IsonetService, public translate :I18nService ) { console.log(‘constructor activity’); }

ngOnInit() {
  this.page.size = 2;
  this.isonetservice.getContext(context => this.OnContextLoaded(context));

}

setPage(pageInfo){
  this.loading = true;
  this.page.pageNumber = pageInfo.offset;
  var activityDB = this.itemsDB;
  this.sortItems.forEach((item ,index) => {
      console.log(item);
      if(item.is_ascending)
      activityDB.orderBy("it => it." +item.prop).skip((this.page.pageNumber) * this.page.size)
      .take(this.page.size)
      .toArray().then(res => {  this.rows = res  , 
                                this.loading = false});
    else
       activityDB.orderByDescending("it => it." +item.prop).skip((this.page.pageNumber) * this.page.size)
      .take(this.page.size)
      .toArray().then(res => {  this.rows = res  , 
                                this.loading = false});
  });
  if(this.sortItems.length == 0)  
  activityDB.skip((this.page.pageNumber) * this.page.size)
      .take(this.page.size)
      .toArray().then(res => {  this.selected = [res[1]],
                                console.log(res[1]) ,
                                this.rows = res  , 
                                this.loading = false});

}

 onSort(event) {
     this.sortItems  = new Array<Sort>();
     event.sorts.forEach(element => {
         this.sortItems.push({prop: element.prop , is_ascending: element.dir == "asc"});
     });
     this.setPage({ offset : this.page.pageNumber});

}

private OnContextLoaded(context){
    this.dbContext = context;
    this.itemsDB = this.dbContext.activities;
    this.itemsDB.count().then(num => {
        this.page.totalElements = num;
        this.setPage({ offset: 0 });
    });
}
private loadItems(): void {
           this.itemsDB.skip((this.page.pageNumber) * this.page.size)
                .take(this.page.size)
                .toArray().then(res => { console.log(res) , 
                                         
                                         this.rows = res  , 
                                         this.loading = false})
}

onSelect({ selected }) { console.log(‘Select Event’, selected, this.selected); } onActivate(event) { console.log(‘Activate Event’, event); } }

`

Reproduction of the problem

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

Please tell us about your environment:

• Table version: 9.3.0

• Angular version: 2.0.x

• 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 ]

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

[dannyvenier]

I think, if you are passing just a literal string in there, you set the value like this: [selectionType]=“‘single’” (single quotes inside your double quotes) Otherwise it is looking for a value for the variable “single”. This is similar to the way angular specifies a string literal in the layout. Give that a try (and note that it applies in all cases where you are assigning a string rather than the value of a variable, so as you have done for [columnMode]).

[gviligvili]

Probably should notify that no selectionType if someone subscribed to the click events. or change the default value to single and not falsey as it is. because it’s not so clear, and can be a nerve breaking bug on such a little thing.