I have added inline editing data features for my datatable. I'm using service call to get the latest data and I'm binding to the datatable using dtOptions. I'm using datatable " ". intially empty data variable binding. as soon as i get data from service i'm binding to the dtOptions which is binding(showing) well. but inline editing is not working. I'm not sure how to add data to editor after getting from service. if i add accessing instance of $.fn.dataTable.Editor. it's just not working. please help to solve this issue.
HTML
<table id='dtGrid' *ngIf="dtRendered" datatable [dtOptions]="dtOptions" class="row-border hover"></table>
script
data = [];
renderDatatable(dtColumns, modelObjAttributes) {
console.log('dtEditor', this.dtEditor);
const colLenth = dtColumns.length;
this.dtRendered = false;
this.dtOptions = {
dom: 'Bfrtip',
data: this.data,
pageLength: 100,
columns: dtColumns,
columnDefs: [ {
targets: colLenth,
defaultContent: '',
title: '<i class="fa fa-plus plusIcon"></i>',
orderable: false
}],
paging: true,
searching: true,
// ordering: true,
info: false,
responsive: true,
drawCallback: () => {
const btnElement = this.dtTableId.nativeElement.querySelector('i.plusIcon');
this.renderer.listen(btnElement, 'click', ($event) => {
this.onClickPlusIcon(modelObjAttributes);
});
},
scrollY: '500px',
// bSort: false,
scrollCollapse: true,
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: 'create', editor: this.dtEditor },
{ extend: 'edit', editor: this.dtEditor },
{ extend: 'remove', editor: this.dtEditor }
// { extend: 'pageLength', editor: this.dtEditor}
]
};
this.cdr.detectChanges();
this.dtRendered = true;
this.cdr.detectChanges();
this.attachPlusIconClickEvent(modelObjAttributes);
this.attachDtClickEvent();
}
// This method used to initialize the data table dyanamically
initializeDtEditor(dtColumns, modelObjAttributes) {
this.dtEditor = new $.fn.dataTable.Editor({
data: this.data,
table: '#dtGrid',
idSrc: this.uniqueField,
fields: this.dataTableFields,
formOptions: {
inline: {
onBackground: 'blur',
onBlur: 'close',
onComplete: 'close',
onEsc: 'close',
onFieldError: 'focus',
onReturn: 'submit',
submit: 'changed',
scope: 'row'
}
}
});
// this.cdr.detectChanges();
this.renderDatatable(dtColumns, modelObjAttributes);
}
// This method to get the data from service if you see i'm binding the reponseData to dtOptions. It adding to the datatable but it's not allowing to edit(inline edit). with buttong edit it's working.
getData(modelName) {
this.dtServiceService.readData(modelName).subscribe(responseData => {
// console.log(JSON.stringify(data));
this.dtOptions['data'] = responseData;
this.dtRendered = false;
this.cdr.detectChanges();
this.dtRendered = true;
this.cdr.detectChanges();
},
error => {
console.log('data is not getting!');
});
}