1

This is related to my question: https://github.com/vitmalina/w2ui/issues/882#event-295994680

Thanks for the response. I have added the code as you recommended, but still does not work. I figured out that the id of the delete button is w2ui-delete by looking at the toolbar.items collection. I am sure I am still missing something, but not sure what.

   onSelect: function(event) {
    event.onComplete = function() {
      if(this.records[event.index].deletable)
        this.toolbar.enable('w2ui-delete');
      else {
        this.toolbar.disable('w2ui-delete');
        $(this.toolbar.items).last().disabled = true;
      }
    }
  }
Maher
  • 481
  • 1
  • 6
  • 12

2 Answers2

1

I have looked up through the code and I see that delete button is automatically enabled/disabled when internally (same as edit and save buttons). It will enable if one or more records are selected and disable otherwise. Therefore, it would be easier to create a custom delete button and enable/disable on our custom conditions. I have created a jsFiddle example

$(function () {    
    $('#grid').w2grid({ 
        name: 'grid', 
        show: { 
            toolbar: true,
            footer: true
        },
        toolbar: {
            items: [
                { type: 'break' },
                { type: 'button', id: 'my-delete', caption: 'My Delete', icon: 'w2ui-icon-cross' }
            ],
            onClick: function () {
                console.log('My Delete Clicked');
            }
        },
        searches: [                
            { field: 'lname', caption: 'Last Name', type: 'text' },
            { field: 'fname', caption: 'First Name', type: 'text' },
            { field: 'email', caption: 'Email', type: 'text' },
        ],
        columns: [                
            { field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' },
            { field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
            { field: 'fname', caption: 'First Name', size: '30%', sortable: true },
            { field: 'email', caption: 'Email', size: '40%' },
            { field: 'sdate', caption: 'Start Date', size: '120px' },
        ],
        onSelect: function(event) {
            event.onComplete = function() {
              if (event.recid > 0 && event.recid < 5) {
                this.toolbar.disable('my-delete');
              } else {
                this.toolbar.enable('my-delete');
              }
            }
        },
        records: [
            { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 22, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 24, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 27, fname: 'Shashi', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
        ]
    });    
});

If you select any record below 5 it will disable the button. Please note that you still can call grids delete method, which will continue on with existing delete functionality. See grid.delete() method.

vitmalina
  • 1,829
  • 1
  • 14
  • 7
0

This will make the delete button always disabled:

onSelect: function(event) {
   setTimeout(function(that) { that.toolbar.disable('w2ui-delete'); }, 1, this);
}

so make it like:

onSelect: function(event) {
   setTimeout(function(that) { if (<my condition>) that.toolbar.disable('w2ui-delete'); }, 1, this);
}

to disable the button when you want.

khryniewiecki
  • 1
  • 1