Disable the row in the kendo grid based on condition

Question

I have a Kendo grid in which I have a checkbox in the last column and I am binding this grid from the server side(filling the data from the server) and in that the checkbox value is also coming from the server.I want to disable the entire row in which the checkbox value is true ie it is checked and want to allow the editing when the checkbox value is false ie it is not checked. My code as follows:

@(Html.Kendo().Grid(Model)
    .Name("UpdatedHeadGrid")
        .Columns(columns =>
        {
           columns.Bound(p => p.ID).Hidden(true).ClientTemplate("#= ID#" + "<input type='hidden' class='ID'  value='#=ID#' />").Width(10);
           columns.Bound(p => p.IsAllocated).HeaderHtmlAttributes(new { title = "Allocatable" }).Title("Allocatable").ClientTemplate("<input type='checkbox'  ${ IsAllocated == true ? checked='checked' : ''}   class='IsAllocated' value='#=data.IsAllocated#' style='width:50px;' />").Width(50).HtmlAttributes(new { style = "text-align: center;vertical-align: middle;"});
           columns.Bound(p => p.Total).HeaderHtmlAttributes(new { title = "Total Amount" }).Title("Total").ClientTemplate("<input type='text' disabled='disabled' class='Total' value='#=data.Total#' style='width:65px;' />").Width(60).HtmlAttributes(new { style = "text-align:right", onclick = "DisableEdit(this)" });
           .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Events(e =>
    {
       e.DataBound("onRowBound");

       e.Edit("onEdit");
    })     
    .PageSize(15)
    .Resizable(resize => resize.Columns(true)) 
)

For this i have written the edit function ie onEdit function as follows:

<script>
    function onEdit(e) {
        var fieldName12548 = e.container.find('input[type="checkbox"][name="IsAllocated"]').attr("value");
        if (fieldName12548 === "Total") {
            this.closeCell();
        }
    }
</script>

Here Instead of only the column with the fieldname="Total" i have to disable all the row.

For editing more than one column

var fieldName = e.container.find("input").attr("name");
  if (fieldName === "AccountTransactionItemDescription" && fieldName === "Identifier" && fieldName === "TradeOrNonTrade" && fieldName === "EntityName")
   {
     this.closeCell();
   }

but here It not working may be this can refer only one.So what would be solution for this?

Answer 1

Instead of using jQuery for finding the value of the input, I would suggest you to use model a field of the event handler argument e .

So you should do:

<script>
    function onEdit(e) {
        if (e.model.IsAllocated) {
            this.closeCell();
        }
    }
</script>

See it in action here: http://jsfiddle.net/OnaBai/ry82wcvc/