Ngx-datatable: 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 :
`
<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]
maysammansoury
All 9 comments
Can you make a demo please?
amcdnl
on 19 Jun 2017
I am also facing same problem.
Select Row operation not working.
Table version: 9.3.0
Angular version: 2.0.x
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX ]
Language: [all | TypeScript X.X | ES6/7 | ES5]
ramkkris
on 30 Jun 2017
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]).
dannyvenier
on 3 Jul 2017
I can confirm that @dannyvenier solution works. I forgot to add the single quotes in the [selectionType] property. Thanks!
manijak
on 12 Jul 2017
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.
gviligvili
on 1 Aug 2017
I can't get it to work
added ' (selectCheck)="onSelectMediaBak($event)"'
but it never fires on mouseClick. Am i missing something?
Nevermind, fixed it by copying from the selection examples. Don't know what i did wrong though
eddieedease
on 15 Aug 2017
Thanks my dear friend @dannyvenier.
Yes , it needs single quotes, it works
maysammansoury
on 16 Aug 2017
goddam single quotes... i should know better.
jdhenckel
on 29 Sep 2017
you need to emit the event:
onSelect(event) {
this.select.emit(event);
}
erdincay
on 10 Oct 2018
Related issues
IngoManthey
路
3Comments
rotemx
路
3Comments
devendraYebhi
路
3Comments
TakhirMamirov
路
3Comments
JanStock
路
3Comments
Most helpful comment
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]).