Make some grid rows read only

[kerstin]

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

[alex.l]

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

[kerstin]

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

[mats]

Until we have 'readOnly' support on model level, you can use the renderer to add a css class and block pointer-events as a workaround. Or simply implement your own CheckColumn class (it's a very simple & shallow class)

[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

[pmiklashevich]

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 }
]

Снимок экрана 2020-06-01 в 14.11.56.png (225.5 KiB) Viewed 1421 times

Best,
Pavel

[kerstin]

Thanks! Works perfect!
BR,
Kerstin