Kendo grid enable editing during insert, disable during edit(applicable to only one column)

kendo-asp.net-mvckendo-gridkendo-ui

I have a scenario where I have a Kendo dropdown, Kendo Datepicker as couple of columns in the grid.
On Add new record, the dropdown should be editable, on Edit mode, this drop down should be non Editable.

I have declared Grid to be Editable in declaration using

 .Editable()
model.Field(p => p.CountryName).Editable(true); // where CountryName is kendo dropdown

I am trying to do on Edit this way,

function OnEdit(e) {
   if (e.model.isNew() == false) {
e.model.fields["CountryName"].editable = false
}

THe behaviour I observe is Initially on load, Editable is set to true (due to cshtml declaration). When I click on Edit too, the drop down is Editable because of the page load flag that is set.

Even though OnEditmethod is executed and editable is set to false, the grid seems to have loaded before this code execution, hence editable =false is not reflected.

If I click on Edit second time, now the editable is set to false due to the previous call, Hence the dropdown is non editable as expected.

In Summary, the flag setting is not effective for the current action, but for the immediate next action. I am not sure if I have made it clear. Can you guys help?

Update – The other option I tried, during databind to the grid, I tried explicitly settign editable to false to all the grid data. My assumption here was only the loaded rows will have this field set to false. But in this case even the add new record takes Editable false.

var grid2 = $("#Gridprepayment").data("kendoGrid").dataSource.data(requiredData);

             $.each(requiredData, function (i, row) {

                 var model = $("#Gridprepayment").data("kendoGrid").dataSource.at(i);
                 if (model) {
                     model.fields["CountryName"].editable = false;
                 }

             });

Best Answer

  1. The best way is to make the column editable . e.g.

    model.Field(d => d.CountryName).Editable(true);

  2. and Onedit function, replace the inner html like mentioned below, for just to display it as label.

    function OnEdit(e) {
    e.container[0].childNodes['0'].innerHTML = e.model.CountryName;
}
Related Topic