How to disable button inside kendo grid cell based on some condition?

Question

I am having 1 column in my grid with name status and my last column of grid contains Column that is Action .

In this Action column i have two button that is Edit and Delete .

Now when my Status value is pending i want to make my delete button disable with tooltip : Cant delete record with status except pending .

This is my code:

                    {
                        field: "Status",
                        title: "Status",
                        width: 200,
                        template: '#if(Status) {#Approved#} else{#Pending#}#'
                    },
                    {
                       field: "Id",
                       title: "Action",
                       width: 60,
                       template: "<a title='Edit' href=''></a><a onclick='javascript:return Delete(\"#:Id#\",\"grid2\");' title='delete'><img src='@Url.Content("~/img/delete.png")' /></a> //Disable this delete when status is except pending.
                       sortable: false
                   }

How to do this??

Answer 1

Please try with the below code snippet. We can not disable the anchor tag so I have removed onclick event from anchor tag, where its status is pending.

columns: [{
    field: "Status",
    title: "Status"
},
{
    field: "StudentID",
    title: "Action",
    template: "<a title='Edit' href=''>Edit</a> " +
                "#if(Status=='Approved'){#   <a onclick='javascript:return Delete(\"#:StudentID#\",\"grid2\");' title='delete'>Delete</a> #}#" +
                "#if(Status=='Pending'){#   <a title='Cant delete record with status except pending'>Delete</a> #}#"


}]

Sample data: