Add checkboxes and multi-select-dropdown in angular-datatables v8.0.0

116 Views Asked by At

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>`
0

There are 0 best solutions below