Disable editing in kendo grid

Question

I am trying make the an editable grid to uneditable depend on conditions.

I have tried in jquery as below

var $grid = &("#gridName").data("kendogrid");
Var model = $grid.datasource.at(1);
if(model)
  model.field["cell"].editable = false;

but here the 'model' is getting undefined.

also tried $grid.data() and then looping through the grid, but the cells are not getting uneditable they are still editable.

Can anyone please let me know how can I make this work.

Solution 1

Issue is resolved.

var $grid = &("#gridName").data("kendoGrid");
var len= &("#gridName").data("kendoGrid tbody tr").length();
for(i=0;i<=len ; i++)
{
var model = $grid.datasource.at(i);
if(model)
  model.fields["cell"].editable = false;
}

Solution 2

You have some typographic errors...

Try this instead:

var $grid = $("#gridName").data("kendoGrid");
var model = $grid.dataSource.at(1);
if (model)
    model.fields["cell"].editable = false;

1. Line 1. In data it is kendoGrid and not kendogrid.
2. Line 2. In model it is var and not Var
3. Line 4. It is fields and not field

EDIT: If you want to change "cell" column to not editable, simply do:

var $grid = $("#gridName").data("kendoGrid");
$grid.dataSource.at(0).fields["cell"].editable = false;

You just need to change it to one row since the model is shared by all rows in the grid.

See it running in JSFiddle here http://jsfiddle.net/OnaBai/GuyPa/

Solution 3

to disable cell editing:

 var len = $("#gridName").find("tbody tr").length;
    for(var i=0;i<=len ; i++)
    {
        var model = $("#gridName").data("kendoGrid").dataSource.at(i);
        if (model) {//field names
            model.fields["DueDateStr"].editable = false;
            model.fields["TotalAmount"].editable = false;
            model.fields["IsPercentage"].editable = false;
        }

    }

to disabled check box control's which it in the template:

$.map($("#gridName").find("input:checkbox"),
        function (item) {
            $(item).attr('disabled', 'disabled');
        }
    );

to remove command buttons like delete button:

 var rows = $('#gridName tbody tr');
    $.map(rows, function (row) {
        //cell buttons index
        row.cells[4].innerHTML = "";

    });

to hide toolbar grid:

$("#gridName .k-grid-toolbar").hide();

Solution 4

If you're using "incell" edit mode, the grid has an "edit" event you could use to immediately close the cell.

$("#grid").kendoGrid({

  ...

  edit: function(e) {
      if ( ... ) {
          this.closeCell();
      }
  }

  ...

});

A more powerful approach would be to subclass the kendoGrid and override the editCell and/or editRow methods. Then you can do whatever you want. Look here for info on subclassing kendo widgets.

Solution 5

for(i=0;i<=$("#grid").find("tbody tr").length ; i++)
{ 
  var model = $("#grid").data("kendoGrid").dataSource.at(i);
  if(model)
  {
      model.fields[$("#grid").data("kendoGrid").columns[i].field].editable = false;    
  }
}

http://jsfiddle.net/parthiv89/qwtyLmhk/

I hope this works well..if works then don't forget to vote me..

View more solutions