Inline editor doesn't display the cell text

Inline editor doesn't display the cell text

alidaalida Posts: 3Questions: 1Answers: 1

I'm new with datatables and I'm trying to use inline editor with edit-icon.
My problem is that when I click on the edit icon the inline field appear but it is empty, it doesn't get the text.
The same thing happens with bubble editor.
Where am I doing wrong?
Thanks in advance for the help,
Alida

My datatable is this:

$('#table').DataTable({
dom : '<"H">rtB<"F">'
, language : { url : (curlang === 'it-it' )? snsbaseurl + "/sns/js/it-it.txt" : '' }
, processing : true
, serverSide : false
, data: $.map( data, function (value, key) {
return value;
} )
, jQueryUI : false
, responsive : true
, deferRender : true
, pagingType : "full_numbers"
, renderer : "bootstrap"
, idSrc: "id"
, createdRow: function( row, data, dataIndex ) {
JQ(row).attr('data-editor-id', data.DT_RowId);
}
, columns : [
{ className : "never" , data:"id", name:"id" }
, {
className : "center",
data:"field1",
name:"field1",
editField: "table.field1",
render: editIcon,
createdCell: function (td, cellData, rowData, row, col) {
$(td).attr('data-editor-field', "field1");
}
}

                          ]

                      , order : [[1, 'asc']]
                      , select: true
                      , buttons: [
                                { extend: "create", 
                                  text: "Create new",
                                  editor: editr,
                                  className: "btn",
                                  formTitle: "Insert new",
                                  formButtons: [
                                        'Add',
                                        { label: 'Cancel', fn: function () { this.close(); } }
                                      ]
                        }]

                });

And the editor is:
var editor= new $.fn.dataTable.Editor( {
table: "#table"
, idSrc: "id"
, fields: [
{
label: "Label for field1:",
name: "table.field1"
}
]
, ajax: function ( method, url, d, successCallback, errorCallback ) {
// creation new element
}
} );

$('#table').on( 'click','td i.edit', function (e) {
e.stopImmediatePropagation(); // stop the row selection when clicking on an icon

        editor.inline( $(this).parent() );

    } );

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,210Questions: 1Answers: 10,415 Site admin

    Can you give me a link to a test case showing the issue please? It appears to work okay in this example for me.

    Allan

  • alidaalida Posts: 3Questions: 1Answers: 1

    I will try to prepare an example as soon as possible. Many thanks.
    Alida

  • alidaalida Posts: 3Questions: 1Answers: 1
    Answer ✓

    I have solved.
    The problem was that in datatable I set
    editField: "table.field1" and name:"field1" while in editor I set name: "table.field1".
    With this configuration the valFromData function in dataTables.editor.js returned the 'undefined' value.
    Solution: I removed table from all fields :)
    Thanks for all.
    Alida

This discussion has been closed.