Modify style and popup when ReadOnly is true on cell

[Nick Fox]

Hello everyone,

thank you in advance for any answers.

I would like to ask two things:

1) Whether it is possible to apply a style change on a spreadsheet cell that is set as readOnly, since if I try, for example, to change the fontWeight or background-color or font-size via the Spreadsheet interface, the change is not applied. If it is possible, in what way could I do this?

2) Whether it is possible to change the popup that appears when the user attempts to change a cell that is set as readOnly or allow a custom popup (e.g. alert) to open. If it is possible, in what way could I do this?

Thanks again!

Regards,

Nick

[Janakiraman Sakthivel]

Hi Nick Fox,

Query 1: Whether it is possible to apply a style change on a spreadsheet cell that is set as readOnly, since if I try, for example, to change the font-weight or background-color or font-size via the Spreadsheet interface, the change is not applied. If it is possible, in what way could I do this?

You can apply styles to cells that are in read-only status at the CSS level. In the beforeCellRender event, you can check if the cell is in read-only mode by verifying the cell's isReadOnly property. If the cell is read-only, you can add a custom class to that cell element. This custom class can be used in your CSS to apply the required styles, as demonstrated in the code snippet below. The beforeCellRender event triggers before each cell element is appended to the DOM.

Note that when a cell is in read-only mode, you cannot apply styles such as background color and font weight directly to that cell, even through UI actions.

CODE SNIPPET:

app.component.ts:

// This event triggers before each cell element is appended to the DOM.

beforeCellRender(args) {

 

        // To confirm the cell is in read-only mode

        if (args.cell && args.cell.isReadOnly) {

 

            if (!args.element.classList.contains('e-readonly')) {

 

                args.element.classList.add('e-readonly'); // CSS class added to the cell element to apply the required style based on the added class name

            }

 

      }

 

}

app.component.css:

.e-spreadsheet .e-cell.e-readonly {

    background-color: rgb(250, 199, 199);

}

 

Query 2: Whether it is possible to change the popup that appears when the user attempts to change a cell that is set as readOnly or allow a custom popup (e.g. alert) to open. If it is possible, in what way could I do this?

You can achieve this requirement by using our dialogBeforeOpen event. This event triggers before the dialog box opens in our spreadsheet. In this event, you can prevent the default read-only alert dialog from opening by setting the cancel property of the event's argument to true. After doing this, you can open your custom popup, such as alert().

If you only want to change the content within the default read-only alert dialog, you can achieve this by assigning your desired content to the content property of the dialogBeforeOpen event's argument.

CODE SNIPPET:

// This event triggers before opening the dialog box.

dialogBeforeOpen(args) {

        // To confirm the read-only alert dialog is opened

        if (args.dialogName === "ReadOnlyAlertDialog") {

            args.cancel = true; // To prevent the default read-only alert dialog from opening

            alert ("The cell is in read-only status"); // You can open your custom popup here; for example, we have used alert() here

 

            // args.content = "The cell is in read-only status"; - You can change the content of the default read-only alert dialog by assigning the required content to the "content" property of the event's argument.

        }

}

For your reference, we have prepared a sample, which is shared below.

Sample: Ujva9t (forked) - StackBlitz

In the shared sample, we have set the range "A1: A30" to read-only and applied the background color style to this read-only range at the CSS level, as mentioned above.

In addition, in this sample, if you try to edit the read-only cells, an alert dialog will open instead of the default read-only alert dialog.

Please check the shared solution on your end and let us know if you need further clarification. If we misunderstood your issue, please provide more details for a better understanding. Based on this information, we will review and offer a more suitable solution promptly.