Answers

• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  March 2018

  Are you using the Datatables Editor?

  If so you should be able to use this example for inline editing and change the event handler to use dblclick
  https://editor.datatables.net/examples/inline-editing/simple.html

  If you are not using Editor then you will need to use an ajax call to send your edits to the server. But without understanding more about what you are wanting its hard to say.

  Kevin
• istudent_learning Posts: 31Questions: 9Answers: 0

  March 2018 edited March 2018

  I am not using Datatables editor. I am using datatables with manual serverside post ajax call. I need to edit only last td column. it may or may not have value when table loads.

  This is how far i reached. dblClick event is not firing.

  Please check my below code.

   <script type="text/javascript">
  
          $(document).ready(function () {
  
              var token = $('[name=__RequestVerificationToken]').val();
  
              var oTable = $('#myTable').DataTable({
  
                  "ajax": {
                      "url": "/MyApp/OrderDetail/GetDetails",
                      "type": "POST",
                      "datatype": "json",
                      "headers": { "__requestverificationtoken": token }
                  },
                  "columns": [
                      { "data": "Store", "name": "Store" },
                      { "data": "Location", "name": "Location" },
                      { "data": "Order", "name": "Order" },
                      { "data": "Sku", "name": "Sku" },
                      { "data": "Qty", "name": "Qty" },
                      { "data": "OrderedDate", "name": "OrderedDate" },
                      { "data": "TrackingInfo", "name": "TrackingInfo" }
                  ],
                  "responsive": true,
                  "rowReorder": {
                      selector: 'td:nth-child(2)'
                  },
                  "createdRow": function (row, data, index) {
                      $('td:last-child', row).addClass('testTd');
                  },
                  "serverSide": "true",
                  "order": [0, "asc"],
                  "processing": "true",
                  "language": {
                      "processing": "Loading. Please wait..."
                  },
  
                  "dom": "<'row'<'col-sm-6'l><'col-sm-6'p>>" +
                      "<'row'<'col-sm-12'tr>>" +
                      "<'row'<'col-sm-4'i>>"
              });
  
              $('.testTd td').on('dblClick', function () {
  
                  debugger;
                  newInput(this);
  
              });
             
              function closeInput(elm) {
                  var value = $(elm).find('input').val();
                  $(elm).empty().text(value);
  
                  $(elm).bind("dblclick", function () {
                      newInput(elm);
                  });
              }
  
              function newInput(elm) {
                  $(elm).unbind('dblclick');
  
                  var value = $(elm).text();
                  $(elm).empty();
  
                  $("<input>")
                      .attr('type', 'text')
                      .val(value)
                      .blur(function () {
                          closeInput(elm);
                      })
                      .appendTo($(elm))
                      .focus();
              }
              
              
              $('.search-input-text').on('keyup click', function () {
                  var i = $(this).attr('data-column');
                  var v = $(this).val().toLowerCase();
                  oTable.columns(i).search(v).draw();
              });
              $('.search-input-select').on('change', function () {
                  var i = $(this).attr('data-column');
                  var v = $(this).val();
                  oTable.columns(i).search(v).draw();
              });
          });
  
      </script>
  

  EDIT: Updated code to use Markdown for formatted display.
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  March 2018 Answer ✓

  First I think the events are case sensitive so you may need to change dblClick to dblclick. Second you will need to use delegated events for this since the table rows are not created when the event is established. Something like this:

             $('#myTable tbody').on('dblclick', '.testTd', function () {
   
                 debugger;
                 newInput(this);
   
             });
  

  Also please use the triple back ticks (```) to format your code. This Markdown doc will show you how.

  Kevin