Disable editing in kendo grid

问题

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.

回答1:

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;

Line 1. In data it is kendoGrid and not kendogrid.
Line 2. In model it is var and not Var
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/

回答2:

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();

回答3:

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.

回答4:

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..

回答5:

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;
}

来源：https://stackoverflow.com/questions/14402953/disable-editing-in-kendo-grid

标签

jquery

asp.net-mvc

razor

kendo-ui