How to prevent DELETE button from activating?

arichardson

I know this is probably a lot easier than I think it is... but I didn't find any examples.

Using Buttons, I have a New and Delete button.

I have a column of checkboxes, and using the Select plugin, when the user selects a given row, based on the CHILD RECORDS column, I want to prevent the user from SELECTING the ROW, thereby preventing the Delete button from activating.

I thought dependent() might work... but it seemed more geared towards callbacks.

var thecolumns = [];
        ps = $('#PROJECTSPECIFIC').val();
        thecolumns = [{
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
        },{
            data: "ELINID",
            visible: true,
            title: "ELIN ID",
            editable: false
        }, {
            data: "ELINNUMBER",
            visible: true,
            title: "DRL NO",
            editable: true
        }, {
            data: "ELINTITLE",
            sortable: true,
            title: "DRL TITLE",
            editable: true
        }, {
            data: "LEADREVIEWER",
            sortable: false,
            title: "LEAD REVIEWER",
            editable: true
        }, {
            data: "ALTLEADREVIEWER",
            sortable: false,
            title: "ALT LEAD REVIEWER",
            editable: true
        }, {
            data: "REVIEWERS",
            sortable: false,
            title: "REVIEWERS",
            editable: true          
        }, {
            data: "ECATEGORY",
            sortable: false,
            title: "SWBS ELEMENT/GROUP",
            editable: true
        }, {
            "data": "FREQCNT",
            "visible": true,
            "title": "CHILD RECORDS"
            
        }];
        
        editor = new $.fn.dataTable.Editor({
            ajax: "drlAndTitle_test.cfc?method=dtAction",
            table: "#drltitletable",
            idSrc: "ELINID",
            fields: [{
                label: "DRL TITLE:",
                name: "ELINTITLE"
            }, {
                label: "LEAD REVIEWER",
                name: "LEADREVIEWER",
                placeholder: 'Choose a LEAD REVIEWER:',
                type: "select"
            }, {
                label: "ALT LEAD REVIEWER",
                name: "ALTLEADREVIEWER",
                placeholder: 'Choose an ALT LEAD REVIEWER:',
                type: "select"
            }, {
                label: "REVIEWERS:",
                name: "REVIEWERS",
                type: "select",
                separator: ", ",
                multiple: true
            }, {
                label: "CATEGORY:",
                name: "ECATEGORY",
                placeholder: 'Choose a CATEGORY:',
                type: "select"
            }, {
                label: "ELIN NO:",
                name: "ELINNUMBER"
            }]
        });
        
        var table = $('#drltitletable').DataTable({
            dom: "Bfrtip",
            serverSide: true,
            order: [1, "asc"],
            destroy: true,
            ajax: {
                "url": "drlAndTitle_test.cfc?method=getData&ReturnFormat=json",
                "type": "POST",
                "data": {
                    PROJECTSPECIFIC: ps
                },
            },
            columns: thecolumns,
            search: true,
            processing: true,
            autoFill: {
                columns: ':not(:first-child)',
                editor: editor
            },
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "remove", editor: editor }
            ]
        });

    $('#drltitletable').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            buttons: { label: '>', fn: function () { 
                this.submit(); 
            } }
        } );
    } );

allan

Just to confirm, the row selection you want to prevent is the DataTable row selection? If so, the dependent() method won't help since it is an Editor API method, rather than a DataTables one.

The way I would probably approach this is to use the select event in combination with row().data() and row().deselect():

table.on( 'select', function ( e, dt, type, indexes ) {
  dt.rows( indexes ).every( function () {
    if ( this.data()... ) {
      this.deselect();
    }
  } );
} );

Where the if condition would need to be updated to fit whatever the condition you want to apply is.

Allan