Delete in Edit popup, and Copy

rpmccormick · September 6

Is this possible:

The Delete Button would call editor.remove (with confirm popup and all)
The copy button with change it to an editor.insert, but with all the values of the edited row.

This would save space, as these are in a custom table of MJOIN data using editor standalone, and I don't want to add a bunch of buttons to the table, just one to popup editor, that also gives you a delete and copy option would be perfect.

allan · September 6

Yes, you can use the buttons() method to define your own buttons. The duplicate example isn't quite the same, but it shows the idea that would be used - use mode() to change the action before submitting the form. This example shows how custom buttons can be defined, and for the delete action it would indeed be a call to remove() for the current row (ids() or modifier()).

Its a good idea this - I like it! I'm in the middle of a contract job at the moment, but I'll look at getting an example of this added for the next release.

Allan

rpmccormick · September 6

Thanks Allen, I will see what I can do and post a solution here if I get one.

Your link to adding buttons is for adding them on table-definition and to the tables top buttons. I can probably figure it out, but if you have a chance can you clarify how to add buttons within my DTEdit function...

  //--- Editor Shortcuts -----------------------------------------------------\\
  function DTNew( DTEditor,     Title='New',                  Button='Create')
   {DTEditor.create(Title, Button);                    HideDatabaseDetails();}
  //--------------------------------------------------------------------------||
  function DTEdit(DTEditor, ID, Title='Edit Data',            Button='Update')
   {DTEditor.edit(ID, {title:Title, buttons:Button});  HideDatabaseDetails();}
  //--------------------------------------------------------------------------||
  function DTDel( DTEditor, ID, Title='',
           Message='Are you sure you want to <b>permanently</b> delete this?',
                                                              Button='Delete')
   {DTEditor.remove(ID, {title: Title, message: Message, buttons: Button});}
  //--------------------------------------------------------------------------||
  function renderDelMsg(DTName='item', ID='', Name= '', Code='')
   {Msg='Are you sure you want to <b>permanently</b> delete this '+DTName+'?';
    Msg='<big><big>'+Msg+'</big></big><br><br>';
    if (  ID != '') {Msg+=DTName+' ID: '  + ID +'<br>';}
    if (Name != '') {Msg+=DTName+' Name: '+Name+'<br>';}
    if (Code != '') {Msg+=DTName+' Code: '+Code+'<br>';}
    return Msg+'<br>';
   }
  //--------------------------------------------------------------------------||
  function loadEDSelect(list, Editor, field)
   {$.getJSON('/api/select/list'+list, function(opts) 
                                        {Editor.field(field).update(opts)});}
  //--- END Editor Shortcuts -------------------------------------------------//

rpmccormick · September 6

Sorry, nevermind, figured it out...

  function DTEdit(DTEditor, ID, Title='Edit Data',            Button='Update')
   {DTEditor.edit(ID, {title:Title, buttons:[{text: 'Cancel'     , action: function () {this.close();}}, 
                                             {text: 'Delete Row' , action: function () {this.close();}}, 
                                             {text: 'Make a Copy', action: function () {this.close();}}, 
                                             Button
                                            ]});  HideDatabaseDetails();}

Adds buttons great, now I just have to code the functions. Will post back the final later. Thanks Allen!

allan · September 6

Nice one!

Allan

rpmccormick · September 6

WOW, That was way easier than I thought possible.

Here is my updated DTEdit function.
Now every Edit popup in my system magically has Delete and Save As.
AWESOME!

  //--- Editor Shortcuts -----------------------------------------------------\\
  function DTNew( DTEditor,     Title='New',                  Button='Create')
   {DTEditor.create(Title, Button);                    HideDatabaseDetails();}
  //--------------------------------------------------------------------------||
  function DTEdit(DTEditor, ID, Title='Edit Data',            Button='Update')
   {DTEditor.edit(ID, {title:Title, 
                     buttons:[{text:'Cancel'         , action:function () {this.close();}            }, 
                              {text:'Delete Row'     , action:function () {DTDel(DTEditor, ID);}     },  
                              {text:'Save as New Row', action:function () {DTEditor.mode('create');
                                                                           DTEditor.submit();      } }, 
                              Button
                 ]    }      );  
    HideDatabaseDetails();
   }
  //--------------------------------------------------------------------------||
  function DTDel( DTEditor, ID, Title='',
           Message='Are you sure you want to <b>permanently</b> delete this?',
                                                              Button='Delete')
   {DTEditor.remove(ID, {title: Title, message: Message, buttons: Button});}
  //--------------------------------------------------------------------------//

For some reason it would not let me chain DTEditor.mode('create').submit(); but it worked fine on 2 lines.

At one point I tried function (e, dt, node, config) {console.log(e, dt, node, config);} but I just got "event, undefined, undefined, undefined". I was glad just using my DTEditor variable worked.

I think I am going to color the buttons, but other than that this is great final code.

rpmccormick · September 6

This looks pretty good:

I'm having trouble making the buttons bootstrap colored though. My method of removing dt-buttons class and adding btn classes works for Buttons on the table, but not in the editor I guess.

Here is way too much code, but maybe someone will find it someday and make use of it...

Edit Functions

  //--- Editor Title Plugin ---------------------------------------------------\\
  $.fn.dataTable.Editor.fieldTypes.title = 
    $.extend(true, {}, $.fn.dataTable.Editor.models.fieldType, 
             {create: function(field) {return $('<div/>')[0];},
                 get: function(field) {return '';},
                 set: function(field, val) {}
            });

  //--- Editor Display Plugin -------------------------------------------------||
  $.fn.dataTable.Editor.fieldTypes.display = 
   {create: function(conf) {conf._div = $('<div/>').attr($.extend({id: conf.id}, conf.attr || {}));
                            return conf._div[0];                           },
       get: function(conf) {return conf._rawHtml;                          },
       set: function(conf, val) {conf._rawHtml = val;  conf._div.html(val);},
      init: function(conf) {},
   disable: function(conf) {}
   };
  //--- END Editor Plugins ----------------------------------------------------//

//--- Editor Shortcuts -----------------------------------------------------\\
  function DTNew( DTEditor,     Title='New',              ButtonText='Create')
   {DTEditor.create(Title, ButtonText);                HideDatabaseDetails();}
  //--------------------------------------------------------------------------||
  function DTEdit(DTEditor, ID, Title='Edit Data',        ButtonText='Update')
   {DTEditor.edit(ID, {title:Title, 
                     buttons:[{text: ButtonText, 
                               init: DT_removeClass, className: 'btn btn-success'
                              },
                              {text: 'Cancel'      , action: function() 
                                {this.close();},
                               init: DT_removeClass, className: 'btn btn-default'
                              }, 
                              {text: 'Delete'      , action: function()
                                {DTDel(DTEditor, ID);},
                               init: DT_removeClass, className: 'btn btn-danger pull-left'
                              },  
                              {text:'Save a Copy'  , action: function()
                                {DTEditor.mode('create');
                                 DTEditor.submit();
                                },     
                               init: DT_removeClass, className:'btn btn-warning pull-left'
                 }    ]      });  
    HideDatabaseDetails();
   }
  //--------------------------------------------------------------------------||
  function DTDel( DTEditor, ID, Title='',
           Message='Are you sure you want to <b>permanently</b> delete this?',
                                                          ButtonText='Delete')
   {DTEditor.remove(ID, {title: Title, message: Message, buttons: ButtonText});}
  //--------------------------------------------------------------------------||
  function renderDelMsg(DTName='item', ID='', Name= '', Code='')
   {Msg='Are you sure you want to <b>permanently</b> delete this '+DTName+'?';
    Msg='<big><big>'+Msg+'</big></big><br><br>';
    if (  ID != '') {Msg+=DTName+' ID: '  + ID +'<br>';}
    if (Name != '') {Msg+=DTName+' Name: '+Name+'<br>';}
    if (Code != '') {Msg+=DTName+' Code: '+Code+'<br>';}
    return Msg+'<br>';
   }
  //--------------------------------------------------------------------------||
  function HideDatabaseDetails()
   {$('.DTE_Field_Type_display').hide();  
    $('.DTE_Field_Name_DD-TITLE').click(function(){$('.DTE_Field_Type_display').show();});
   }
  //--------------------------------------------------------------------------||
  function loadEDSelect(list, Editor, field)
   {$.getJSON('/api/select/list'+list, function(opts) 
                                        {Editor.field(field).update(opts)});}
  //--- END Editor Shortcuts -------------------------------------------------//

Init Functions

  //--- START Custom DataTable Functions -------------------------------------\\

  //--- Fixes look of bootstrap-buttons on DataTables Buttons (Export) -------||
  function DT_removeClass(api, node, config) {$(node).removeClass('dt-button');}

  //--- Load-Table calls adjTable() after AJAX import ------------------------||
  function loadTable(dtName, APIparams='', APIfolder='', callback)
   {let url = '/api/dt/'+APIfolder+dtName+'?'+APIparams;
    //console.log('LOAD #tbl'+dtName+': '+url);  //too noisy
    $('#spin'+dtName).show();
    $('#tbl' +dtName).DataTable().ajax.url(url).load(function() 
     {adjTable(dtName);
      if (typeof callback === "function") {callback();}
     }                                              );
   }

  //--- Refresh-Table same as loadTable with no change to URL or Params ------||
  function refTable(dtName)
   {console.log('REFRESH #tbl'+dtName);
    $('#spin'+dtName).show();
    $('#tbl' +dtName).DataTable().ajax.reload(function() {adjTable(dtName)}, false);
   }

  //--- Adjust Table to fix Responsive issues --------------------------------||
  function adjChild()
   {//$('.child').attr("style","background-color:#f5f5f5!important"); //also set background color;
    $('td.child').css('cssText', 'background-color:#cdf!important');
    //$('.child ul').css('width', '95%');  //what was this for?  Bad idea!
    $('.dtr-title').css('width', '100%');
    $('.dtr-details').css('width', '100%');
   }

  function adjChildren()
   {adjChild();
    setTimeout(adjChild,   1);
    setTimeout(adjChild,  51);
    setTimeout(adjChild, 101);
    setTimeout(adjChild, 251);
   }

  function adjTable(dtName)
   {//Responsive Recalc
                           $('#tbl' +dtName).DataTable().columns.adjust().responsive.recalc();
    setTimeout(function() {$('#tbl' +dtName).DataTable().columns.adjust().responsive.recalc();}                          ,  50);
    setTimeout(function() {$('#tbl' +dtName).DataTable().columns.adjust().responsive.recalc(); adjChildren();}           , 100);
    setTimeout(function() {$('#tbl' +dtName).DataTable().columns.adjust().responsive.recalc(); $('#spin'+dtName).hide();}, 250);
    $('.control').on('click', adjChildren);

    //DISABLED COLORING OF ROWS AND CHILDREN (for now)
    /*/Enable Highlight of Last Clicked Row (without TT/Buttons Selection)
    $('.dataTable tbody').on('click', 'tr', function()
     {$('.dataTable tbody tr.collapsed').removeClass('selected');
      var tr = $(this);
      var row = $('.dataTable').DataTable().row(tr);
      if (row.child.isShown()) {tr.addClass('selected'); 
                                adjChildren();
                               }
      else                     {tr.addClass('collapsed selected');}
     }                      );
    */

    /*/Keep all Open Rows Selected (for color-matching odd/even)
    $('.dataTable tbody').on('click', 'td.control', function () 
     {var tr = $(this).closest('tr');
      var row = $('.dataTable').DataTable().row(tr);
      if (row.child.isShown()) {tr.addClass('selected').removeClass('collapsed'); 
                                adjChildren();
                               }
      else                     {tr.addClass('collapsed');}
     }                      );
    */

   }
  //--------------------------------------------------------------------------||
  //Fix child width/badge on resize-bigger, without needing a click
  window.addEventListener('resize', adjChildren, true);
  //--- END Custom DataTable Functions ---------------------------------------//

rpmccormick · September 6

@Allan, I'm glad you like the idea. I love that it all works so well and so easy. DT is amazing.

When you do have a time to make a demo, maybe you could explore how to do some deeper button styling? This is how I really want it:

I have those dropdown buttons on the right column of all by datatables rows. Different in different places:

...anyway, would love every Edit popup to have one of these DropDown buttons with the default "Update" and the dropdown containing Update, Delete, Copy. Not sure if possible. The way I have it now and the way you have made it possible it is amazing already, I'm just always looking to improve on everything.

Could add a "Reset" option as well, that would not close the editor, but would undo all edits. (might be dangerous, don't want to undo programmatic initial-edits... maybe cheat by having it actually close and re-open the editor window)

rpmccormick · September 6

Here is a colored version, but this is only created by unchecking lots of things in devtools. For the tables I could just remove class dt-buttons and all would be good, but for this editor they only have btn, not dt-buttons, and there is no easy way to remove all the default styling I can find.

Again though, if you anyone could help me figure out how to just have one button with a dropdown menu, that would be even better.

rpmccormick · September 6

If I make it a div instead of a button it looks right (but then clicking it does nothing).
Guess I'd have to edit the editor .css file to not style button.
No clue how to attempt the dropdown button on my own.

rpmccormick · September 7

This is what I am using going forward. I will revisit this someday:

Here only the needed code to launch this:

  //--------------------------------------------------------------------------||
  function DTNew( DTEditor,     Title='New',              ButtonText='Create')
   {DTEditor.create(Title, ButtonText);                HideDatabaseDetails();}
  //--------------------------------------------------------------------------||
  function DTEdit(DTEditor, ID, Title='Edit Data',        ButtonText='Update')
   {DTEditor.edit(ID, {title:Title, 
                     buttons:[{text: 'Cancel'      , action: function() 
                                {this.close();},
                              }, 
                              ButtonText, 
                              {text: 'Delete'      , action: function()
                                {DTDel(DTEditor, ID);},
                          className: 'pull-left'
                              },  
                              {text:'Copy As New'  , action: function()
                                {DTEditor.mode('create');
                                 DTEditor.submit();
                                },     
                          className: 'pull-left'
                 }    ]      });  
   }
  //--------------------------------------------------------------------------||
  function DTDel( DTEditor, ID, Title='',
           Message='Are you sure you want to <b>permanently</b> delete this?',
                                                          ButtonText='Delete')
   {DTEditor.remove(ID, {title: Title, message: Message, buttons: ButtonText});}
  //--------------------------------------------------------------------------||

And usage is:

DTEdit( {your-editor}, {row-id-to-edit} );

With that you can Edit/Copy/New/Delete on any Editor
(you will have to either have the editor linked via table: or have hidden divs of all the editor-data for the row if using stand-alone)

rpmccormick · September 9

One More Beauty shot of it in-action:

allan · September 9

I like it a lot - it looks superb!

Thanks for the suggestion for future enhancement of the buttons. I will consider that in future work - it certainly would be nice to expand their flexibility.

Allan

Delete in Edit popup, and Copy

Delete in Edit popup, and Copy

Answers

Howdy, Stranger!

Categories

DataTables

Delete in Edit popup, and Copy

Delete in Edit popup, and Copy

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables