Disable Delete button

Question

Hi

I want if IsActive = "N" then Delete button of that row should get Disabled.

$('#tblLocation').DataTable({
"ajax": {
"url": '/Location/List',
"type": "get",
"datatype": "json",
dataSrc: ""
},
paging: true,
sort: true,
pageLength: 10,
searching: true,
"columns": [
{ "data": "Id", "autoWidth": true },
{ "data": "Description", "autoWidth": true },
{ "data": "IsActive", "autoWidth": true },
{
"data": "Id", "render": function (data) {
return "<a class='btn btn-primary btn-sm' data-Id=" + data + " id='btnEdit'><i class='fa fa-pencil'></i> Edit</a> <a class='btn btn-danger btn-sm' data-Id=" + data + " id='btnDelete' style='margin-left:5px' ><i class='fa fa-trash'></i> Delete</a>";
}
}
]
});

Thanks

Answer 1

Hi @Jagjit Saini ,
You could use render in the datatable columns. "style="pointer-events: none" could disabled the button.
Just like this:

102262-test.txt

Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Given your specific example you can do it just like you're doing the data-id attribute. Something like this (you'll need to play around with it):

"render": function (data) {
var isActive = data["IsActive"] === true;

if (isActive) {
   return "<a class=... > Delete</a>
} else
{
   <span>Delete</span>
}
}

The point here is that you really cannot disable an anchor. It doesn't even make sense. You can google for why disabling an anchor is not the correct choice. Instead use an anchor if you need it to be active or a span to just display the anchor text if you don't. You can use CSS to ensure the styling lines up.

Answer 3

@Jagjit Saini

IMHO, you need to send 'data' into a JavaScript function looping over the Jason array in 'data' and build the HTML manually using a HTML table and enable or disable the btn based on the property in the Json object's property.