Local table editing doesn't work with inline mode?

steveEdmondson

I can enter values into the datatable, but on "blur" the values disappear.
What am I missing?
I'm using ajax in the datatables definition, does that matter?

editor with no ajax here:
editor: new DataTable.Editor({
table: '#commissionGrid',
idSrc: 'CommissionId',
fields: [
{
name: 'AdjustedAmount'
},
{
name: "AdjustmentReason",
type: "select",
def: "",
attr: { class: 'css-dropdown responsive box-sized' },
ipOpts: [
{ label: "", value: "" },
{ label: "Individual Commission Rate", value: "Individual Commission Rate" },
{ label: "LiveCalc Issue", value: "LiveCalc Issue" }
]
}
]
})

$('#commissionGrid').on('click', 'tbody td:not(:first-child)', function (e) {
config.editor.inline(this);
});

//datatables columns
columns: [
{ title: '', data: 'CommissionId', width: '0%', sortable: false },
{
title: 'Adjusted Amt',
data: 'AdjustedAmount',
width: '50%',
class: 'ignoreRowClick right_align',
sType: 'currency',
render: function (data) {
if (data == null) {
return "";
}
return grid.getAmount(data.AdjustedAmount, 'en-US')
}
},
{ title: 'Adjustment Reason', data: 'AdjustmentReason', width: '50%', class: 'ignoreRowClick' }
],

allan

It does. If you go to this example and pop open the console in your browser and setup inline editing with:

    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

You'll see the table's data getting updated. Obviously on a refresh the data changes are lost.

Can you link to your page showing the issue so I can take a look into it? I'm wondering if it is related to the use of idSrc: 'CommissionId'. Do you have rowId: 'CommissionId' also set in the DataTable?

Allan

steveEdmondson

Allan,
Thank you so much for the quick response.
Can't link to my page -- it's an intranet site, but i see the same behavior in the example.
https://editor.datatables.net/examples/simple/noAjax.html
Chrome browser, Edge browser - same result.

I wonder why it works differently for you.

1-I went to the example page and pasted the editor.inline code into the console.
The inline edit is visible, but on click out, the new value disappears -- which is the same behavior i see in my case.

2-Yes i have a rowId of CommissionId - you can see it in my columns definition.

steveEdmondson

Figured it out! Two gotchas for me.
1- you have to type the value, then hit "enter" for the value to persist.
Now i see why you're saying it works in the example.

2-in my case there's some .css preventing it from displaying.
When i hit enter the value is no longer visible, but when i go back and click the cell i see the value in the textbox.

steveEdmondson

For the #2 gotcha, I think the display problem is related to the "render" attribute or the sType attribute.
But that's for another day!

{
                    title: 'Adjusted Amt',
                    data: 'AdjustedAmount',
                    width: '8%',
                    class: 'ignoreRowClick right_align',
                    sType: 'currency',
                    render: function (data) {
                        if (data == null) {
                            return "";
                        }
                        return grid.getAmount(data.AdjustedAmount, 'en-US')
                    }
                },

allan

1- you have to type the value, then hit "enter" for the value to persist.

Ah! Sorry, that's because of how well I know the software. You can have it save on blur:

editor.inline( this, {
  onBlur: 'submit'
} );

With number 2, the DataTables renderer shouldn't cause a problem with the display of the form field. If you are able to give me a link to a page showing the issue I can take a look at it.

Regards,
Allan