DataTables Editor - Adding Soft Delete to SmartAdmin Angular 5 App

Question

I am using SmartAdmin 1.9.1, which is an Angular 5 framework. SA provides a DataTables plugin, that I want to extend with the DataTables' Editor, so that I can do soft deletes of rows. DataTables is v1.10.18, Editor is v1.8.1.

DataTables without Soft Delete is working fine in my app. I've even been able to extend it with row selection checkboxes. Looking at the Editor Soft Delete example, I grabbed the code for the Delete block, and added it to my a5 component.html, as shown here:

          <sa-datatable
            [options]="{
              data: sysMsgs,
              columns: [
                 {data: 'checked'},
                 {data: 'rowid'},
                 {data: 'senderID'},
                 {data: 'message'},
                 {data: 'dateCreated'}
              ],
              buttons: [
                'copy', 'csv', 'pdf', 'print',
                {
                    extend: 'selected',
                    text: 'Delete',
                    action: function ( e, dt, node, config ) {
                        var rows = table.rows( {selected: true} ).indexes();
     
                        editor
                            .hide( editor.fields() )
                            .one( 'close', function () {
                                setTimeout( function () { // Wait for animation
                                    editor.show( editor.fields() );
                                }, 500 );
                            } )
                            .edit( rows, {
                                title: 'Delete',
                                message: rows.length === 1 ?
                                    'Are you sure you wish to delete this row?' :
                                    'Are you sure you wish to delete these '+rows.length+' rows',
                                buttons: 'Delete'
                            } )
                            .val( 'users.removed_date', (new Date()).toISOString().split('T')[0] );
                    }
                }
              ],
              columnDefs: [ 
                {
                  targets: 0,
                  orderable: false,
                  className: 'select-checkbox'
                },
                {
                  targets: [2],
                  visible: true
                }
              ],
              select: {
                  style: 'os',
                  selector: 'td:first-child'
              },
              order: [[ 1, 'asc']],
              searching: true,
              search: {
                  smart: false                  
              }               
            }"
            tableClass="table table-striped table-bordered table-hover"
          >
            <thead>
            <tr>
              <th data-hide="mobile-p">Select</th>
              <th data-hide="mobile-p">ID</th>
              <th data-hide="mobile-p">Sender</th> 
              <th data-hide="mobile-p">Message</th>
              <th data-hide="mobile-p">Date Sent</th>
            </tr>
            </thead>
          </sa-datatable>

The Soft Delete example is based on using jQuery, which I'd like to avoid, because I'd prefer to keep all my code Angular 5.

I cannot figure out how to modify the sa-datatable without resorting to jQuery. Do you have any ideas on how to get this working?

Thanks, Bob

Answer 1

I decided not to use DataTables Editor, and instead was able to handle soft deletes by calling functions in the original DataTables code. Here is what I am now using:

          <sa-datatable
            [options]="{
              data: collMsgs,
              columns: [
                 {data: 'checked'},
                 {data: 'senderID'},
                 {data: 'message'},
                 {data: 'messageStatus'},
                 {data: 'dateCreated'},
                 {data: 'dateExpires'}
              ],
              buttons: [
                'copy', 'csv', 'pdf', 'print',
                {
                    extend: 'selected',
                    text: 'Delete',
                    action: handleButtons()
                },
                {
                    extend: 'selected',
                    text: 'Archive',
                    action: handleButtons()
                },
                {
                    extend: 'selected',
                    text: 'Read',
                    action: handleButtons()
                }
              ],
              columnDefs: [
                {
                  targets: 0,
                  orderable: false,
                  className: 'select-checkbox'
                },
                {
                  targets: [2],
                  visible: true
                }
              ],
              select: {
                  style: 'multiple',
                  selector: 'td:first-child'
              },
              order: [[ 1, 'asc']],
              searching: true,
              search: {
                  smart: false
              }
            }"
            tableClass="table table-striped table-bordered table-hover"
          >
            <thead>
            <tr>
              <th data-hide="mobile-p">Select</th>
              <th data-hide="mobile-p">Sender</th>
              <th data-hide="mobile-p">Message</th>
              <th data-hide="mobile-p">Status</th>
              <th data-hide="mobile-p">Date Sent</th>
              <th data-hide="mobile-p">Date Expires</th>
            </tr>
            </thead>
          </sa-datatable>

Bob