How to disable remove button until condition is met.
How to disable remove button until condition is met.
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.
This question has an accepted answers - jump to answer
Answers
The
remove
button extends from theselected
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 yourremove
button that would take into account not only the row selection, but also the data in the row.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
@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:
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:Allan