Hi,

I'm giving Editor a go, but running into the error in the subject when trying to inline edit or a similar error with bubble but "ofFeatture" instead of "attach".

I think it has to do with the fact that I initialize DataTable, then add add later. As I'm using this for a reporting and continually clearing and drawing the table as filters are changed.

Error comes up as soon as I click on cell.

Here is my code;

       var reportingTable = "";
       var reportingTableEditor = "";
       $(document).ready(function () {
           reportingTableEditor = new DataTable.Editor({
               table: '#ReportDateRange',
               fields: [
                   {
                       label: 'FullName:',
                       name: 'fullName'
                   },
                   {
                       label: 'Email:',
                       name: 'email'
                   },
                   {
                       label: 'Number:',
                       name: 'number'
                   },
                   {
                       label: 'LastVisit:',
                       name: 'lastVisit'
                   },
                   {
                       label: 'VisitCount:',
                       name: 'visitCount'
                   },
                   {
                       label: 'FormCount:',
                       name: 'formCount'
                   },
                   {
                       label: 'CallCount:',
                       name: 'callCount'
                   },
                   {
                       label: 'ChatCount:',
                       name: 'chatCount'
                   },
                   {
                       label: 'Action:',
                       name: 'action'
                   }
               ],
           });

           reportingTable = $("#RerportingTable").DataTable({
               "scrollX": true,
               responsive: false,
               "dom": "Bfrtip",
               "processing": true,
               "filter": true,
               "orderMulti": false,
               "deferRender": true,
               "scrollY": 500,
               "scrollCollapse": true,
               "scroller": true,
               "paging": false,
               "order": [[0, "asc"]],
               buttons: [
                   {
                       extend: 'csv',
                       //Name the CSV
                       filename: 'CRM Contact Export',
                       exportOptions: {
                           columns: [0, 1, 2, 3, 4, 5, 6, 7]
                       }
                   }

               ],
               "columns":
                   [
                       { "data": "fullName", "name": "FullName", "autoWidth": true },
                       { "data": "email", "name": "Email", "autoWidth": true },
                       { "data": "number", "name": "Number", "autoWidth": true },
                       { "data": "lastVisit", "name": "LastVisit", "autoWidth": true },
                       { "data": "visitCount", "name": "VisitCount", "autoWidth": true },
                       { "data": "formCount", "name": "FormCount", "autoWidth": true },
                       { "data": "callCount", "name": "CallCount", "autoWidth": true },
                       { "data": "chatCount", "name": "ChatCount", "autoWidth": true }
                   ],
               "columnDefs":
                   [
                       {
                           "targets": 8,
                           data: null,
                           width: "20%",
                           title: 'Action',
                           wrap: true,
                           "createdCell": function (td, cellData, rowData, row, col) {
                               $(td).html(`<a class="btn btn-danger mb-2 me-2 OpenPartialModal action-icon" data-target="#EditOrAddCustomerInstanceCampaignModal" data-url="/CRM/AddOrEditCustomerInstancePartial?id=${cellData.id}"> <i class="mdi mdi-square-edit-outline"></i></a> <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>`);
                           }
                       }
                   ]
           });
           reportingTable.on('click', 'tbody td:not(:first-child)', function (e) {
               reportingTableEditor.inline(reportingTable.cell(this).index(), {
                   onBlur: 'submit'
               });
           });
       })

 function populateReportTable() {
     let selectedSite = $('#SiteSelector').val();
     if (selectedSite !== "") {
         $.LoadingOverlay("show", {
             image: "",
             fontawesome: "fa fa-cog fa-spin"
         });
         reportingTable.clear();

         $.get(`/CRM/ReturnListOfContactsBySiteID?siteID=${selectedSite}`)
             .done(function (data) {
                 $.LoadingOverlay("hide");
                 $(data).each(function () {
                     var rowNode = reportingTable.row.add({
                         "fullName": this.fullName,
                         "email": this.email,
                         "number": this.number,
                         "lastVisit": this.lastVisit,
                         "visitCount": this.visitCount,
                         "formCount": this.formCount,
                         "callCount": this.callCount,
                         "chatCount": this.chatCount,
                         "id": this.id
                     });
                     var node = rowNode.node();
                 });
                 reportingTable.draw();                       
             });
     }
 }

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.