I am using SmartAdmin Angular 5 framework 1.9.1, which provides DataTables capabilities. I have installed DataTables 1.10.18, and Select 1.2.6.
My app can use either test data, or data from a web service. When I use test data, all works fine with the Delete and Archive buttons - meaning, the button action events are fired. But, when using web service data, the Delete and Archive buttons do not fire the button actions.
You can try my app at:
tanglemydata.com
To see problem, do this:
- Use latest Chrome or Firefox (no mobile), make browser window wide enough to see the buttons (as shown below).
- Login - I've hard-coded in the login credentials.
- Click Notifications in left pane.
- Expand General Messages, wait for table to display. Data comes from web service.
- Select one or multiple rows.
- Click Delete or Archive buttons - you should see a YES/NO dialog, it does not work.
- Expand Colleagues, then expand Colleague Messages, wait for table to display. Test data is hard-coded.
- Select one or multiple rows.
- Click Delete or Archive buttons - you should see a YES/NO dialog, it does work.
Looking at the .ts code line 145, you see that I go through a table.clear().rows.add(data_from_web_service).draw() operation. I tried it w/wo clear(), but same problem.
I have the following component.ts code:
import { NgModule, Component, OnInit, Injectable, Inject, ViewChild, DoCheck } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormControl } from '@angular/forms';
import { FadeInTop } from "../shared/animations/fade-in-top.decorator";
import { NotificationsService } from './notifications.service';
import { NotificationService } from '../shared/utils/notification.service';
import { DatatableComponent } from '../shared/ui/datatable/datatable.component';
declare let $:any;
@FadeInTop()
@Component({
selector: 'sa-datatables-case',
templateUrl: './notifgenmsg.component.html',
styleUrls: ['../../assets/css/tmd_basic.css']
})
@Injectable()
export class NotifGenMsgComponent implements OnInit, DoCheck {
@ViewChild(DatatableComponent) ngxDatatableComponent: DatatableComponent;
public genMsgs: any;
constructor(
private router: Router,
private notificationsService: NotificationsService, //TMD version
private notificationService: NotificationService //SA version used for dialogs
) {}
ngOnInit() {
//###console.log("NotifGenMsgComponent ngOnInit - ENTRY");
//this allows the router.navigate to re-call this component, providing fresh data
this.router.routeReuseStrategy.shouldReuseRoute = function(){
return false;
};
//this kicks-off the web service call for data, when data is returned the (val) block is reached then refreshDataTable() is called
this.getNotifGenMsgData();
//###console.log("NotifGenMsgComponent ngOnInit - EXIT");
}
ngDoCheck() {
//this is called after ngOnInit - see https://codecraft.tv/courses/angular/components/lifecycle-hooks/
}
handleButtons() {
//###console.log('handleButtons');
if($(this.ngxDatatableComponent)) {
if($(this.ngxDatatableComponent).DataTable) {
console.log('processing button clicks');
const ngxDataTable = $($(this.ngxDatatableComponent).DataTable.tables()).DataTable();
const deleteBtnNum = 4;
const archiveBtnNum = 5;
ngxDataTable.button(deleteBtnNum).action(() => { //lambda expression provides access to outer this, but inner this is not accessible
//###console.log( this.text() +' button was clicked' ); //will not work when using lambda expression
console.log('Delete button clicked');
const selection = ngxDataTable.rows({ selected: true } ).data().toArray();
this.doSelection(selection, 'Delete');
});
ngxDataTable.button(archiveBtnNum).action(() => { //lambda expression provides access to outer this, but inner this is not accessible
//###console.log( this.text() +' button was clicked' ); //will not work when using lambda expression
console.log('Archive button clicked');
const selection = ngxDataTable.rows({ selected: true } ).data().toArray();
this.doSelection(selection, 'Archive');
});
}
}
}
doSelection(selection: any, buttonName: String) {
//remove after testing
let rowStr = "";
for (const row of selection) {
rowStr += row.rowid +",";
}
rowStr = rowStr.substring(0, rowStr.lastIndexOf(","));
const content = "Do you want to " +buttonName +" the " +selection.length +" rows selected?";
this.notificationService.smartMessageBox({
title : "<i class='fa fa-question-circle txt-color-yellow'></i> " +buttonName +" <span class='txt-color-white'><strong>" + $('#show-shortcut').text() + "</strong></span>",
content : content,
buttons : '[No][Yes]'
}, (ButtonPressed) => {
if (ButtonPressed === "Yes") {
//###console.log(buttonName +' selected rows');
//call appropriate web service
for(let i=0; i<selection.length; i++) {
//###console.log("row having database ID " +selection[i].rowid +" selected for " +buttonName);
}
}
});
}
getNotifGenMsgData() {
//###console.log("NotifGenMsgComponent getNotifGenMsgData - ENTRY");
const TESTING = false;
if(TESTING) {
//###console.log("NotifGenMsgComponent getNotifGenMsgData - ############# USING TEST DATA");
const resStr = '['
+ '{"checked":null,"rowid":"14","personID":"ALL","senderID":"ADMIN","message":"TEST DATA10 - TangleMyData has an outage planned for November 15, 2018 from 1:00 UTC until 2:00 UTC.","messageStatus":"NEW","messagePrimType":"SYSTEM","messageSubType":"GENERAL","dateExpires":"2018-11-15 09:02:37","dateCreated":"2018-11-05 09:02:37","dateLastUpdate":"2018-11-08 01:19:10"},'
+ '{"checked":null,"rowid":"15","personID":"ALL","senderID":"ADMIN","message":"TEST DATA11 - TangleMyData has an outage planned for November 15, 2018 from 1:00 UTC until 2:00 UTC.","messageStatus":"NEW","messagePrimType":"SYSTEM","messageSubType":"GENERAL","dateExpires":"2018-11-15 09:02:37","dateCreated":"2018-11-05 09:02:37","dateLastUpdate":"2018-11-08 01:19:10"},'
+ '{"checked":null,"rowid":"16","personID":"ALL","senderID":"ADMIN","message":"TEST DATA12 - TangleMyData has an outage planned for November 15, 2018 from 1:00 UTC until 2:00 UTC.","messageStatus":"NEW","messagePrimType":"SYSTEM","messageSubType":"GENERAL","dateExpires":"2018-11-15 09:02:37","dateCreated":"2018-11-05 09:02:37","dateLastUpdate":"2018-11-08 01:19:10"}'
+ ']';
this.genMsgs = JSON.parse(resStr);
} else {
this.notificationsService.getNotifGenMsgData().then(
(val) => {
this.genMsgs = this.notificationsService.genMsgs;
if (this.genMsgs) {
console.log("NotifGenMsgComponent getNotifGenMsgData - genMsgs is not null");
this.refreshDataTable();
} else {
//###console.log("NotifGenMsgComponent getNotifGenMsgData - genMsgs is null");
}
this.router.navigate(['/notifgenmsg']);
},
(err) => {
//###console.log("NotifGenMsgComponent getNotifGenMsgData - error: " +err);
}
);
}
//###console.log("NotifGenMsgComponent getNotifGenMsgData - EXIT");
}
refreshDataTable() {
if($(this.ngxDatatableComponent)) {
if($(this.ngxDatatableComponent).DataTable) {
console.log('refreshing ngxDataTable #####################');
const ngxDataTable = $($(this.ngxDatatableComponent).DataTable.tables()).DataTable();
ngxDataTable.clear().rows.add(this.genMsgs).draw();
}
}
}
}
Here's a screen shot of my General Messages table:
Thanks,
Bob
