Editor post submit breaking columns created cell

Jack7

I'm using editor with bubble editing and everything works as it should. Post submit the row gets update correctly except cells that are populated with createdCell for example"

   "createdCell": function (td, cellData, rowData, row, col) {
       $(td).html(`<a href="javascript:void(0);" class="OpenPartialModal" data-target="#AddOrdEditSiteInventoryModal" data-url="${buttonPrefix}${rowData.id}">Edit</a>`);
   }

Post update it sets that cell to display : [object Object]

Any idea what I'm doing wrong ?

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

Kevin

kthorngren

Its hard to say what the problem might be without seeing the issue. columns.createdCell only executes only once for each cell as it is created. It does't run again if that cell is updated. Sounds like the issue happens when trying to update the cell.

Looks like that cell is a link - are you bubble editing that cell?

Do you want to bubble edit that cell?

Start by posting your full Editor and Datatables init code. Use the browser's network inspector to get the sent payload parameters and the response. Post both here - please use Markdown code formatting with the triple back ticks.

Better is a link to your page or test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Jack7

I'm so sorry for only replying now, things just ran away from me. Here is my code. I can add the other info if you still think its necessary after viewing a stripped down version of my code, I just left out some of the columns so ignore the target counts.

I bubble edit 4 columns only :
- priceAmended
- discountAmended
- additionalDiscount
- addOnCharge

Post submit everything updates perfectly, the cells with links are the ones that break and display (target 2, target 18, target 19) :
[object Object]

siteInventoryDataTableEditor = new DataTable.Editor({
    table: '#SiteInventoryDataTable',
    idSrc: 'id',
    ajax: {
        url: "/SiteInventory/TableUpdate/",
        data: function (d) {
            var outputData = {};
            var editedRowId = Object.keys(d.data)[0];
            outputData.id = editedRowId;
            outputData.priceAmended = d.data[editedRowId].priceAmended;
            outputData.discountAmended = d.data[editedRowId].discountAmended;
            outputData.additionalDiscount = d.data[editedRowId].additionalDiscount;
            outputData.addOnCharge = d.data[editedRowId].addOnCharge;
            outputData.lockUpdateValue = lockValue;
            return outputData;
        }
    },

    fields: [
        {
            label: 'Amended Price:',
            name: 'priceAmended'
        },
        {
            label: 'Amended Discount:',
            name: 'discountAmended'
        },
        {
            label: 'Additional Discount:',
            name: 'additionalDiscount'
        },
        {
            label: 'Add-On-Charge:',
            name: 'addOnCharge'
        }
    ],
    formOptions: {
        bubble: {
            buttons: [
                'Update', // Default update button
                {
                    text: 'Update and Lock',
                    action: function () {
                        this.submit(null, null, function (data) {
                            lockValue = true;
                        });
                    }
                }
            ]
        }
    }
});

siteInventoryDataTable = $("#SiteInventoryDataTable").DataTable({
    "scrollX": true,
    responsive: false,
    "dom": "Bfrtip",
    "processing": true,
    "filter": true,
    "orderMulti": false,
    "deferRender": true,
    "scrollY": "500px",
    "scrollX": true,
    "scrollCollapse": true,
    "scroller": true,
    "paging": false,
    "order": [[3, "desc"]],    

    "columnDefs":
        [
            {
                "targets": 0,
                data: "id",
                name: "Id",
                "visible": false,
                "searchable": false,
                "orderable": false
            },
            {
                "targets": 1,  // targeting the first column
                "data": null,  // no data field is associated with this column
                "defaultContent": '<input type="checkbox" class="row-checkbox">',
                "orderable": false,  // checkboxes column should not be orderable,
                "searchable": false
            },
            {
                "targets": 2,
                data: null,
                "autoWidth": true,
                "orderable": false,
                "searchable": false,
                "createdCell": function (td, cellData, rowData, row, col) {
                    $(td).html(`<a href="javascript:void(0);" class="OpenPartialModal" data-target="#AddOrdEditSiteInventoryModal" data-url="${buttonPrefix}${rowData.id}">Edit</a>`);
                }
            },
           
            {
                "targets": 10,
                data: "priceAmended",
                name: "PriceAmended",
                "autoWidth": true,
                wrap: true
            },
            {
                "targets": 11,
                data: "discountAmended",
                name: "DiscountAmended",
                "autoWidth": true
            },
            {
                "targets": 12,
                data: "additionalDiscount",
                name: "AdditionalDiscount",
                "autoWidth": true
            },
            {
                "targets": 13,
                data: "addOnCharge",
                name: "AddOnCharge",
                "autoWidth": true
            },          
            {
                "targets": 18,
                data: null,
                title: 'Compliance',
                "autoWidth": true,
                wrap: true,
                "createdCell": function (td, cellData, rowData, row, col) {
                    if (cellData.compliant === 'Compliant') {
                        $(td).html('<p class="text-success">Compliant</p>');
                    } else {
                        $(td).html(`<p class="text-danger">${cellData.compliant}</p>`);
                    }
                }
            },
            {
                "targets": 19,
                data: null,
                width: "20%",
                title: 'Timeline',
                wrap: true,
                "createdCell": function (td, cellData, rowData, row, col) {
                    $(td).html(`<a href="javascript:void(0);"></a>`);
                }
            }
        ]
});

 siteInventoryDataTable.on('click', 'tbody td', function (e) {
     var columnIndex = siteInventoryDataTable.cell(this).index().column;
     var columnName = siteInventoryDataTable.column(columnIndex).header().textContent;
     if (['Amended Price', 'Additional Discount', 'Amended Discount', 'Add-On Charge'].includes(columnName.trim())) {
         siteInventoryDataTableEditor.bubble(siteInventoryDataTable.cell(this).index(), {});
     }
 });
 
 function populateSiteInventoryTable() {
    $.LoadingOverlay("show", {
        image: "",
        fontawesome: "fa fa-cog fa-spin"
    });
    let siteID = document.getElementById("SiteID").value;
    $.get(`/GetSiteInventory`).done(function (data) {
        if (data.siteInventoryViewModels) {
           
            siteInventoryDataTable.clear();
            $(data.siteInventoryViewModels).each(function () {
                var rowNode = siteInventoryDataTable.row.add({
                    "id": this.id,                  
                    "compliant": this.compliantString,                   
                    "priceAmended": this.priceAmended,
                    "discountAmended": this.discountAmended,
                    "additionalDiscount": this.additionalDiscount,
                    "addOnCharge": this.addOnCharge,
                    "state": this.stateString,                   
                    "viewCount": this.viewCount,                  
                });
            })
            siteInventoryDataTable.draw();
            siteInventoryDataTable.columns.adjust().draw();
        } else {
            $.LoadingOverlay("hide");
        }
    }).fail(function () {
    });
}

kthorngren

I think I understand now after seeing your code. I believe the problem is with using columns.data as null which assigns the full row of data to that cell. columns.createdCell executes just once when the cell is initially inserted into the document. I believe that when the row is updated via the Editor the data in the columns with columns.data set to null are also updated. Thus the [object Object] display.

I think you have two options:

-1. Use columns.render instead of columns.createdCell to display the links, for example:

            {
                "targets": 19,
                data: null,
                width: "20%",
                title: 'Timeline',
                wrap: true,
                "render": function (data, type, rowl) {
                    if (type === 'display') {
                      return `<a href="javascript:void(0);"></a>`;
                    }
                    return data;
                }
            }

-2. Set the columns.data to an unused key name. Using this I think you will also need to use columns.defaultContent. You can set the defaultContent to the link string or, in the case of a conditional, set it to an empty string and let the columns.createdCell set the value. Keep in mind if the cellData.compliant value changes columns.createdCell won;'t run again to update the cell.

I would go with option 1 as it will keep the cells updated in case of changes.

Kevin

Jack7

Thank you so much, option 1 worked exactly as you said it would.