Can not implement Editor inline

collinhunter

I tried to implement inline editing of the datatable but I cannot select each cell - it doesn't seem to switch to a text box to edit

collinhunter

I keep getting: Unable to find row identifier For more information. I using datatables with SharePoint Online and rest calls to get the data. I'm also using 1.7.3.

RestUrl = appUrl + "_api/SP.AppContextSite(@target)/web/lists/getbytitle('Members')/items?$Select=Id,Title,bpAddress,bpAddress2,bpAddress3,bpCity,bpProvState,bpPostalZip,bpHomePhone,bpCellPhone,bpWorkPhone&$filter=" + $listofmembers + "&orderby=Title asc&@target='" + hostUrl.replace("#", "") + "'";

            executor.executeAsync({
                url: RestUrl,
                method: "GET",
                dataType: "json",
                headers: {
                    "Accept": "application/json;odata=verbose"
                },
                success: function (data) {
                    var jsonObject2 = JSON.parse(data.body);
                    var results2 = jsonObject2.d.results;

                    if (results2.length > 0) {
                        //construct HTML Table from the JSON Data    

var oEditor = new $.fn.dataTable.Editor({
"ajax": data,
"table": '#BulkEditMembersTable',
"fields": [{
"label": "ID:",
"name": "Id"
}, {
"label": "Address:",
"name": "bpAddress"
}, {
"label": "Address 2:",
"name": "bpAddress2"
}, {
"label": "Address 3:",
"name": "bpAddress3"
}, {
"label": "City:",
"name": "bpCity"
}, {
"label": "Province/State:",
"name": "bpProvState"
}, {
"label": "Postal/Zip:",
"name": "bpPostalZip"
}, {
"label": "Home Phone:",
"name": "bpHomePhone"
}, {
"label": "Cell Phone:",
"name": "bpCellPhone"
}, {
"label": "Work Phone:",
"name": "bpWorkPhone"
}
]
});

                        $('#BulkEditMembersGrid').append(GenerateBulkEditMembersTableHeaderFromJson());
                        //Bind the HTML data with Jquery DataTable
                        var oTable = $('#BulkEditMembersTable').DataTable({
                            //control which datatable options available
                            data: results2,
                            //dom: '<"top"Bf>rt<"bottom"ip><"clear">',
                            dom: "Bfrtip",
                            //add select functionality to datatable    
                            responsive: {
                                details: {
                                    renderer: function (api, rowIdx, columns) {
                                        var data = $.map(columns, function (col, i) {
                                            return col.hidden ?
                                                '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                                                '<td>' + col.title + ':' + '</td> ' + '<td>' + col.data + '</td>' +
                                                '</tr>' :
                                                '';
                                        }).join('');
                                        return data ?
                                            $('<table/>').append(data) :
                                            false;
                                    }
                                }
                            },
                            select: {
                                style: 'os',
                                selector: 'td:first-child',
                                blurable: true
                            },
                            keys: {
                                columns: ':not(:first-child)',
                                editor: oEditor
                            },
                            pagingType: 'simple',
                            idSrc: 'Id',
                            buttons: [
                                { extend: "create", editor: oEditor },
                                { extend: "edit", editor: oEditor }
                            ],
                            columns: [
                                { "data": "Id" },
                                { "data": "Title" },
                                { "data": "bpAddress" },
                                { "data": "bpAddress2" },
                                { "data": "bpAddress3" },
                                { "data": "bpCity" },
                                { "data": "bpProvState" },
                                { "data": "bpPostalZip" },
                                { "data": "bpHomePhone" },
                                { "data": "bpCellPhone" },
                                { "data": "bpWorkPhone" }
                            ],
                            order: [[0, 'asc']]

                        });



                        oTable.on('click', 'tbody td:not(:first-child)', function (e) {
                            oEditor.inline(this);
                        });                            

                    }

kthorngren

Try moving idSrc: 'Id', from the Datatables config to the Editor. The Editor uses idSrc.

Kevin

collinhunter

Thanks that worked. Also I appended the following to the results2 json object so that it had a DT_RowId:

for (var i = 0; i < results2.length; i++) {
results2[i].DT_RowId = results2[i].Id;
}

collinhunter

Now the only issue is that when you click the cell, and enter a change, after you move to the next cell it reverses the changes. I assume that event would be the onBlur event (once leaving focus).

For example if City had Fredericton and you changed it to Toronto, when you click on a different field, it would revert back to Fredericton. I'm using REST calls so its a bit more work - I may have to put a button to save all the rows in the datatable and make a json call to update SharePoint.

collinhunter

Check out the editor example https://editor.datatables.net/examples/inline-editing/simple.html which will show you the results I'm seeing. Change a field and then lose focus. The change reverts back.

kthorngren

Are you retrieving and submitting the full row in the response for the inline edit?

This page shows the expected request and response:
https://editor.datatables.net/manual/server#Example-data-exchanges

Kevin