Grid - how to disable in-line editing

[AP]

I have a grid with in-line editing enabled. This works well.

There is now a requirement to disable editing of the displayed records, depending on the filter selected (at the top of the page).  I need a way to simply turn on or off editing via JavaScript .

Please note, this isn't conditional editing, the filter is selected via controls on the top of the page, which then trigger a data source read. Depending on the chosen filter date (i.e. in the past)  I need to simply disable editing of all the displayed records.

 

Thanks

[Ivan Danchev]

Hello,

With inline editing enabled, the Grid's row is placed in edit mode when the user clicks on an "Edit" button rendered in one of the columns. The Grid does not expose an API method to enable/disable editing, but it exposes a beforeEdit event, which you can use to prevent the editing conditionally. To do that:

1. Attach a handler through the Events configuration:

.Events(ev => ev.BeforeEdit("onBeforeEdit"))

2. In the handler, add your conditional logic that gets the value from the control that holds the relevant filter value. Based on that value, prevent the event:

function onBeforeEdit(e) {
  var myFilterValue = 1;

  if(myFilterValue == 1) {
    e.preventDefault();
  }
}

In the example above I use a hard-coded value. In your case you should get the value from the respective control and set the correct condition.

The effect of preventing the event will be that the row will not go into edit mode. Since in this scenario the user is not supposed to be able to edit the records, you may consider hiding the column with the "Edit" buttons. Otherwise, having a column with "Edit" buttons that do nothing, could be confusing to the user. You can hide the column with the hideColumn API method: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/hidecolumn

Regards,
Ivan Danchev
Progress Telerik

[AP]

Thanks, hiding the edit button should work, along with a server-side check