Hi,
How can I make some of the rows in a grid editable and some rows read only? Is it possible in the data to tell if editing is allowed or not?
Best regards,
Kerstin
Hi kerstin,
Try beforeCellEditStart
event. Fires on the owning Grid before editing starts, return false to prevent editing.
Docs: https://www.bryntum.com/docs/grid/#Grid/feature/CellEdit#event-beforeCellEditStart
grid.on('beforeCellEditStart', ({ editorContext }) => {
return editorContext.record.id === 12;
});
All best,
Alex
All the best,
Alex
Hi,
Thanks for reply!
I get the event for fields of all types except for "check", so I can't prevent the user from select or deselect a checkbox.
What I do want is to show the user that some rows can't be updated, preferably by disabling input fields, including checkboxes.
Is there a way to disable fields of type "check" before they are rendered?
Best regards,
Kerstin
Hi,
Thanks for reply!
I have tried to add a renderer to the column of type "check". The renderer is never called. Could you please give an example of how to add a renderer for this type?
I used your example "Basic demo" (umd) and added a second age column, type "check" with a renderer, also added a renderer to the first column "age" of type "number". The renderer of type "number" is called, the renderer of type "check" is not called.
BR,
Kerstin
Hello Kerstin,
'renderer' is a private function for WidgetColumn and CheckColumn. We have a bug in docs generator. Ticket here: https://github.com/bryntum/support/issues/866
To make a row read-only I would recommend you to follow the suggestion Mats posted above. Please add a new css rule to style rows you want to be read-only, for example:
.b-grid-row.not-editable {
pointer-events: none; // this line makes the row to ignore clicks, others are optional
background: lightgrey;
opacity: 0.3 !important;
}
Then add this class to the resources cls field, for example in Basic demo:
const resources = [
{ id : 'r1', name : 'Mike', test : true, cls : 'not-editable' },
......
columns : [
{ text : 'Name', field : 'name', width : 130 },
{ text : 'Check', type : 'check', field : 'test', width : 130 }
]
Best,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer