Enable/Disable Kendo Grid Cells

Question

I have a DropDownlist and Kendo Grid. If value selected in dropdownlist is 1 the cells in the Grid should be editable, and if the selected value is 2 the cells in the grid should not be editable. The following is the code for Kendo Grid.

 @(Html.Kendo().Grid(Model.Data.Items)
  .Name("Grid1")
  .Columns(columns =>
       {
         columns.Bound(p => p.first).Title("first").Width(100).HeaderHtmlAttributes(new { style = "text-align:center;font-weight:bold" }).HtmlAttributes(new { style = "text-align: right;" }).Format("{0:N}").ClientTemplate("");
         columns.Bound(p => p.second).Title("second").Width(100).HeaderHtmlAttributes(new { style = "text-align:center;font-weight:bold" }).HtmlAttributes(new { style = "text-align: right;" }).Format("{0:N}");
         columns.Bound(p => p.third).Title("Third").Width(100).HeaderHtmlAttributes(new { style = "text-align:center;font-weight:bold" }).HtmlAttributes(new { style = "text-align: center;" });
       })
  .DataSource(dataSource => dataSource
  .Ajax()
  .ServerOperation(true)
  .Model(Model=> { Model.Id(p => p.first); })

   )
  .Selectable()                                        
  .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
  .Scrollable(scr => scr.Height(179)))

Using I can edit the cell at all times, but I need a condition where the cells should not be editable when dropdownlist selected value changes. (Note:Grid is in .cshtml(view) page, not in js file.)

Please help me with this.

you need to use jquery to detect select change and make your grid row editable or not according to this selection. — hasan

Sandman Sandman · Accepted Answer · 2017-07-14T07:43:40

Not sure if this impossible without the use of a grid event which calls a Javascript function.

You can use the edit event wired up to a function which you can use to apply conditional checks on the data:

function onEdit(e) {          
    if(e.model.ShipCountry == "Germany" && e.container.index() == 0) {
       this.closeCell(); 
    }
}

In the above example, the onEdit function checks if the row at the currently clicked cell has a ShipCountry equal to Germany and if the sender of the event is at column 0. If so, it closes the cell thereby blocking it from edit.

Here is a Dojo example to demonstrate. Take a look at the console to see the object attributes that e sent via the edit event and e.model have to offer.

Note: The example is purely Javascript, but you can wire up the edit event to the grid on MVC using:

.Events(e => e.Edit("onEdit"))

Note: The function(onEdit) in .js file should be placed before $(document).ready function, because the grid renders before the document.ready() is triggered.

Enable/Disable Kendo Grid Cells

1 Answers