Grid - how to disable in-line editing

1 Answer 190 Views
Grid
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 18 Jan 2023, 04:08 PM

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 23 Jan 2023, 03:24 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

AP
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 07 Feb 2023, 10:00 AM

Thanks, hiding the edit button should work, along with a server-side check
Tags
Grid
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or