Facing issues with implementing checkboxes and multi-select dropdown in angular datatables. npm package angular-datatables: 8.0.0
Trying to create checkbox and ng-multiselect-dropdown column in angular datatables. but after the implementation of following code getting [Object, Object] in the browser display.
in .ts file this is the following code
this.dtOptions = {
pagingType: 'full_numbers',
responsive: true,
serverSide: true,
processing: true,
autoWidth: true,
searchHighlight: true,
visible: true,
api: true,
"ordering": true,
searchDelay: 2000,
"scrollCollapse": true,
'columnDefs': [ {
'orderable': false,
targets: 0,
width: 20,
className: 'select-checkbox'
},
{
targets: 1,
}],
ajax: (dataTablesParameters: any, callback) => {
this.checkClass = "overlay";
this.newService.getNewList("test", dataTablesParameters)
.subscribe(resp => {
this.checkClass = "hiddenOverlay";
this.totRecs = 15;
if (this.totRecs === 10000 && this.showPop) {
this.delayedPopover();
}
callback({
recordsTotal: 15,// assign total records
recordsFiltered: 15,// assign total records
data: resp.body['data'],
});
});
},
columns: [
{ data: null },//checkbox1
{ data: null },//checkbox2
{ data: 'FIELD1', "defaultContent": "N/A" },
{ data: null }, //multiselect
],
};
in .html file
<thead style="width:100%; font-size: 12px;">
<tr>
<th>Submit</th>
<th>Skip</th>
<th class="non-editable-column astrik">Claim No</th>
<th>Drivers</th>
</tr>
</thead>
<tbody style="width:100%; font-size: 12px;">
<tr *ngFor="let c of test; let i of index">
<td><input type="checkbox" name="websitecheck"> </td>
<td><input type="checkbox" name="websitecheck1" > </td>
<td >{{c.FIELD1}}</td>
<td>
<ng-multiselect-dropdown
[style.pointer-events]="c.SKIPPED==1 ? 'none' : 'auto'"
[disabled]="c.SKIPPED==1?1:0"
class="custom-font-size"
[placeholder]="'Select Drivers'"
[settings]="dropdownSettings"
[data]="dropdownList"
[(ngModel)]="c.DRIVERS"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
>
</ng-multiselect-dropdown>
</td>
</tr>
</tbody>`