How to disable remove button until condition is met.
How to disable remove button until condition is met.
hjohnsick
Posts: 12Questions: 5Answers: 0
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
removebutton extends from theselectedbutton type, which uses this function to determine if it should be enabled or not.So what you need to do is provide your own
initfunction for yourremovebutton 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
hasQtywill 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
onfunction, you'd need to refer back to the previous scope:Allan