How to disable remove button until condition is met.

hjohnsick

Hello,
I am trying to disable the remove button until the Order Qty is greater than zero. I found another question here,
https://datatables.net/forums/discussion/31248/how-to-disable-the-remove-button-upon-row-elect-when-a-value-is-0, which is what I am trying to do but the solution is not working for me. The remove button always gets enabled when a row is selected. I only want it to be enabled if a row is selected and the order qty for that row is greater than 0.

This is my code:

const editor = new DataTable.Editor({
        fields: [
            {
                label: "Cases to Order:",
                name: "OrderQty",
                className: "required",
                attr: {
                    required: true,
                }
            }
        ],
        table: "#DataGrid",
        idSrc: "OrderItemId"
    });
let dtDataGrid = new DataTable();

 // unrelated code here that I removed for this example

                                dtDataGrid = $('#DataGrid').DataTable({
                                    data: result.data,
                                    columns: [
                                        { data: "OrderQty", title: "Order Qty" },
                                        { data: "MinOrder", title: "Min Order" },
                                        { data: "MaxOrder", title: "Max Order" },
                                        { data: "PreviousOrder", title: "Previous Order" },
                                        { data: "ProductServiceCode", title: "Product Service Code" },
                                        { data: "ProductDescription", title: "Product Description" },
                                    ],
                                    order: [[3, "asc"]],
                                    select: {
                                        style: 'single'
                                    },
                                    layout: {
                                        topStart: {
                                            buttons: [
                                                {
                                                    text: 'Remove',
                                                    className: 'button-margin',
                                                    attr: {
                                                        id: 'removeButton',
                                                    },
                                                    extend: 'remove',
                                                    name: 'remove',
                                                    editor: editor,
                                                    enabled: false
                                                }
                                            ]
                                        }
                                    }
                                });

    $('#DataGrid').on('select.dt deselect.dt', function () {
        let selectedRows = dtDataGrid.rows({ selected: true }).count();
        let selectedData = dtDataGrid.row('.selected').data();
        let orderQty = selectedData.OrderQty;

        if (selectedRows === 1) {
            if (orderQty > 0) {
                dtDataGrid.button('remove:name').enable();
            }
            else {
                dtDataGrid.button('remove:name').disable(); // when debugging this line does get hit but the button still ends up  getting enabled
            }
        }
        else {
            dtDataGrid.button('remove:name').disable();
        }

    });

Also not sure why but the first time I select a row, the selectedData has the data but when I click on another row, the selectedData is now undefined, then when I click another row again, it has the data.

Looking forward to hearing suggestions.

allan

The remove button extends from the selected button type, which uses this function to determine if it should be enabled or not.

So what you need to do is provide your own init function for your remove button that would take into account not only the row selection, but also the data in the row.

init: function (dt, node, config) {
  var hasQty = false;

  dt.rows({selected: true}).every(function () {
    var rowData = this.data();

    if (rowData.orderQty > 0) {
      hasQty = true;
    }
  });

  if (hasQty) {
    this.enable();
  }
  else {
    this.disable();
  }
}

I haven't tested it, but I think that should do the job. If there are no rows selected, then hasQty will be false and the button deselected.

Allan

hjohnsick

@allan Thank you for pointing me in the right direction! I tried your solution but was getting an error that this.enable(); and this.disable() are not a function. I was able to get it working by doing this:

      {
          text: 'Remove',
          className: 'button-margin',
          attr: {
              id: 'removeButton',
          },
          extend: 'remove',
          name: 'remove',
          editor: editor,
          init: function (dt, node, config) {
              dt.on('select deselect', function () {
                  let hasQty = false;
                  dt.rows({ selected: true }).every(function () {
                      let rowData = this.data();
                      if (rowData.OrderQty > 0) {
                          hasQty = true;
                      }
                  });

                  if (hasQty) {
                      dtDataGrid.button('remove:name').enable();
                  }
                  else {
                      dtDataGrid.button('remove:name').disable();
                  }
              })
          },
      },

allan

Yes, if you change the function scope, which is what is happening inside the on function, you'd need to refer back to the previous scope:

{
    text: 'Remove',
    className: 'button-margin',
    attr: {
        id: 'removeButton',
    },
    extend: 'remove',
    name: 'remove',
    editor: editor,
    init: function (dt, node, config) {
        var that = this;

        dt.on('select deselect', function () {
            let hasQty = false;
            dt.rows({ selected: true }).every(function () {
                let rowData = this.data();
                if (rowData.OrderQty > 0) {
                    hasQty = true;
                }
            });
 
            if (hasQty) {
                that.enable();
            }
            else {
                that.disable();
            }
        })
    },
},

Allan