How to disable checkbox of a row in kendo grid using javascript function

Question

I have a kendo grid where columns are defined and 2 columns are checkbox type. based on some validation in the comments row data, I want to disable the checkbox of that particular row in the grid.
I have a separate javascript function that I am using for validation but I am not able to disable the checkbox of that row. I am adding both the kendo grid code and the javascript function.

Kendo Grid:

createGrid: function (data) {
    $("#ProductGrid").kendoGrid({
        dataSource: {
            data: tableData
        },
        columns: [        
            { field: "Accept", tilte: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Accept), "template": "<input type=\"checkbox\" />" },
            { field: "Decline", tilte: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Decline), "template": "<input type=\"checkbox\" />" },
            { field: "Item", tilte: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Item) },
            { field: "PartID", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.PartID) },
            { field: "Description", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Description), width:'300px' },
            { field: "SubPart", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.SubPart) },
            { field: "SubPartDescription", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.SubPartDescription) },
            { field: "BusinessPartner", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.BusinessPartner) },
            { field: "ReqDelTM", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.ReqDelTM) },
            { field: "EarDelTM", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.EarDelTM) },
            { field: "EarDelDate", title: "Ear Del Date", hidden: true },
            { field: "Comments", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Comments) },        
        ]
    });
},

JS Function:

checkComments: function () {
    var productGrid = $("#ProductGrid").data("kendoGrid");
    var productGridData = productGrid.dataSource;
    var noofproduct = productGridData.data().length;
    var dataList = productGridData.data();  

    for (var i = 0; i < noofproduct; i++)
    {
        if (dataList[i].Comments == "Date not met")
        {
            (dataList[i].Accept.enable(false));      
        }
    }
}

VladaxLe VladaxLe · Accepted Answer · 2019-08-30T08:27:44

You can use kendo templates to disable your checkboxes by condition.

  var data = [
    {disabled: false}, 
    {disabled: true}, 
    {disabled: false}
  ];

  $('#grid').kendoGrid({
    dataSource: data,
    columns: [{
      title: "checkbox",
      template: function (item){
        return "<input type='checkbox' " + (item.disabled ? 'disabled': '') + ">"}
    }]
  });

You can try this solution here

How to disable checkbox of a row in kendo grid using javascript function

1 Answers