CODEWITHSUNDEEP
jqueryasp.net-mvcrazorkendo-ui
user1870358
user1870358

Reputation: 225

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.

Upvotes: 4

Views: 34276

Answers (5)

Parthiv Pandya
Parthiv Pandya

Reputation: 336

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

Upvotes: 1

hamzeh.hanandeh
hamzeh.hanandeh

Reputation: 743

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

Upvotes: 2

moomoo
moomoo

Reputation: 916

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.

Upvotes: 1

OnaBai
OnaBai

Reputation: 40887

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/

Upvotes: 15

user1870358
user1870358

Reputation: 225

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

Upvotes: -8

Related Questions