Answers

• collinhunter Posts: 5Questions: 1Answers: 0

  April 2018

  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 Posts: 21,468Questions: 26Answers: 4,977

  April 2018

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

  Kevin
• collinhunter Posts: 5Questions: 1Answers: 0

  April 2018

  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 Posts: 5Questions: 1Answers: 0

  April 2018

  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 Posts: 5Questions: 1Answers: 0

  April 2018

  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 Posts: 21,468Questions: 26Answers: 4,977

  April 2018

  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