CODEWITHSUNDEEP
javascriptjqueryasp.net-mvccheckboxkendo-grid
SantyEssac
SantyEssac

Reputation: 809

Disable the editing in Incell Kendo grid

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 i.e it is checked and want to allow the editing when the checkbox value is false i.e 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 i.e 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.

Upvotes: 1

Views: 1954

Answers (2)

mortenma71
mortenma71

Reputation: 1286

I had a slightly different case: only allow edit of field2 value (incell), when field1 had value x or y.

$("#questions-grid").kendoGrid({
    ...
    ...
    edit: function(e) {
      var $row = e.container;
      var $input = $row.find("input");
      if ($($input).attr("id") === 'field2') {
        if (e.model.field1 !== 1) {
            $input.remove();
            // option b: use this.closeCell(); // if triggering cellClose is ok
        }
      }
    },
    cellClose: function(e) {
      if (e.model.dirty) {
        updateRow(e.model);
      }
    }
}

Upvotes: 0

Rahul
Rahul

Reputation: 2307

For that you should have to use the Datasource as::

 .DataSource(dataSource => dataSource
        .Ajax()
             .Model(model =>
             {
                 model.Id(p => p.ID);
                 model.Field(p => p.Total).Editable(false);

             })
        .PageSize(15)
    )

Here in the above code, I have set Editable mode to 'false' which will disable the cell.

Upvotes: 3

Related Questions