How to refresh the datatable inline editor after getting data from service?

sparkstersajjad

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!');
  });
}

allan

if i add accessing instance of $.fn.dataTable.Editor. it's just not working

I'm afraid you'll need to give me a little more information that this - ideally a link to a test case showing the issue.

Are you seeing any error's reported in your browser's console?

Allan