Is it possible to make group-start's content editable?

sunny_s

I know this may be a weird questions, not sure if anyone else ever wonder the same thing. I wonder is it possible to make group-start's content editable?

Here's an example which I'm able to make the content in a tr to be editable. So when I click the pencil, I can edit the text.

In my special row grouping table, when I click on group-start (the one with grey background), rows will expand or collapse.

I tried to apply content editable to group-start but when I click on the pencil, instead of let me edit the content, rows are expanded. Even though I gave the pencil z-index 9999, it didn't work.

If there's a solution that'll be great! Thank you very much!

sunny_s

Here's the expandable row group function

$(function () {
  /* ---- DataTable for ITMES PAGE --- */
  let itemExpandedGroups = {};
  let departmentNameIndex = 2;
  let itemTable = $('#items-table').DataTable({
    'columnDefs': [
      {
        //hide the department name
        'targets': [ departmentNameIndex ],
        // 'visible': false,
      }
    ],
    'paging':   false,
    'pageLength': 1,
    //use department name as the default order
    orderFixed: [[departmentNameIndex, 'asc']],
    rowGroup: {
      dataSrc: departmentNameIndex,
      startRender: function (rows, group) {
        let expanded = !!itemExpandedGroups[group];
        rows.nodes().each(function (r) {
          //collapsed by default
          // r.style.display = 'none';
          // if (expanded) {
          //   r.style.display = '';
          // }
          //expanded by default
        r.style.display = expanded ? 'none' : '';
        });
        // Add category name to the <tr>. NOTE: Hardcoded colspan
        return $('<tr/>')
          .append('<td colspan="8" class="to-be-edited">' + group + ' (' + rows.count() + ')<i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i></td>')
          .attr('data-name', group)
          .css('cursor', 'pointer')
          .toggleClass('expanded', expanded);
      }
    }
  });

  $('#items-table tbody').on('click', 'tr.group-start', function () {
    let name = $(this).data('name');
    itemExpandedGroups[name] = !itemExpandedGroups[name];
    itemTable.draw(false);
  });

})

Here's my editable js (in a separate file)

$(function () {
  /***
   the following function works for table. The content which to be editable must wrapped within tr.
  example:
  <tr>
    <td><a href="#" class="to-be-edited department-name">custom data</a><i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i></td>
    <td> <a href="#" class="edit-name">Edit Name</a> </td>
  </tr>
  the content must have classname to-be-edited. Followed by <i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i>
  ***/

  //give the buttons correct icons
  $.fn.editableform.buttons =
  '<button type="submit" class="btn btn-primary btn-sm editable-submit">'+
    '<i class="fa fa-fw fa-check"></i>'+
  '</button>'+
  '<button type="button" class="btn btn-default btn-sm editable-cancel">'+
    '<i class="fa fa-fw fa-times"></i>'+
  '</button>';
  //make sure '.to-be-edited' can only toggle by the pencil icon
  $.fn.editable.defaults.mode = 'inline';
  $('.to-be-edited').editable({
    toggle: 'manual'
  })

  $('.pencil-edit-name').on('click', function(e) {
    e.stopPropagation();
    let toBeEdited = $(this).closest('tr').find('.to-be-edited');
    $(toBeEdited).editable('toggle');
    $(this).hide();
  });

  $(document).on('click', '.editable-cancel, .editable-submit', function(){
    $('.pencil-edit-name').show();
  })

});

allan

Its an interesting idea - thanks for your suggestion. You could probably use Editor's multi-row editing ability for this. I think you'd need to use bubble() rather than inline() though since inline editing only supports a single cell at a time just now.

Allan