Editor Status

SpreadJS provides information about the editor status of a cell in the status bar present at the bottom of the Spread. The following types of editor status of a cell can be encountered while interacting with cells:

Ready: Indicates the general state of the cell. It means the cell has not been interacted with yet.
Enter: Indicates the data entry mode in an empty cell. Spread commits the current input and navigates or selects other cells if the user uses navigate or select actions.
Edit: Indicates in-cell editing mode in a non-empty cell. When editing a cell, you cannot use the cursor keys to navigate to other cells.

The editor goes into the edit mode if the editor status of a cell is Enter or Edit. Typing and double-clicking on an empty cell will cause the cell to enter the Enter status, whereas double-clicking on a non-empty cell causes the cell to enter the Edit status. Furthermore, by default, the keyboard shortcut, the F2 key, also causes the cell to enter the Edit status.

If the cell is in Enter status and you click in the editor using the left mouse button, the status changes to Edit. You can navigate using arrow keys when the sheet is in edit mode.

SpreadJS allows you to retrieve or change the editor status of a cell programmatically. Refer to the following sections for more information:

Retrieve Editor Status

SpreadJS provides the ability to get information about the editor status of a cell by using editorStatus method of the Worksheet class. This method can be used to trigger events and perform specific actions in the spreadsheet whenever the edit status of a cell is changed during user interaction.

SpreadJS also provides startEdit method which is similar to double-clicking.

The following example displays the editor status and changes cell values according to the current cell status:

<script>
    $(document).ready(function () {

        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var activeSheet = spread.getActiveSheet();
        spread.commandManager().register("startEditing", { 
        canUndo: false, execute: function (context, options) {
            var sheet = context.getSheetFromName(options.sheetName);
            if (sheet && !sheet.isEditing()) {
                sheet.startEdit();
            }
        }
        }, 113, false, false, false, false);
        
        setstatus(activeSheet);
        activeSheet.bind(GC.Spread.Sheets.Events.EditorStatusChanged, function (e, args) {
            setstatus(activeSheet, args.status);
        });
    });

    function setstatus(activeSheet, status) {
        var statusnow = status || activeSheet.editorStatus();
        if (statusnow === GC.Spread.Sheets.EditorStatus.ready) {
            activeSheet.setValue(0, 0, "Editor Status: Ready!");
            $("#status").text("Ready");
        } else if (statusnow === GC.Spread.Sheets.EditorStatus.enter) {
            activeSheet.setValue(0, 0, "Editor Status: Enter!");
            $("#status").text("Enter");
        } else if (statusnow === GC.Spread.Sheets.EditorStatus.edit) {
            activeSheet.setValue(0, 0, "Editor Status: Edit!");
            $("#status").text("Edit");
        }
    }
</script>
</head>
<body>
    <div id="ss" style="height:700px;width:900px"></div>
    <label id="status" style="margin: 10px" />
</body>

Change Editor Status

SpreadJS allows you to change the editor status of a cell programmatically using changeEditorStatus command, which toggles between Enter and Edit when editing the cell.

You can also change the editor status of a cell via the default keyboard shortcut, the F2 key.

SpreadJS also provides startEdit command that allows you to start editing the active cell with Edit mode programmatically.

You can also start editing the active cell with Edit mode via the default keyboard shortcut, the F2 key.

To change the editor status using changeEditorStatus command, you need to start editing the active cell with Edit mode in an active cell and trigger EditStarting event using startEdit command.

The following example displays the editor status and changes the status directly to Enter mode when starting to edit the active cell:

changed-editor-status

<body>
    <script src="./scripts/gc.spread.sheets.all.0.0.0.min.js" type="text/javascript"></script>
    
    // Add button to execute start edit command.
    <button id="btn1">Start Edit Command</button>
    
    <div class="sample-container">
        <div id="ss" class="sample-spreadsheets"></div>
        <div id="statusBar"></div>
    </div>
    <script>
		let spread = new GC.Spread.Sheets.Workbook("ss");
        
        // Show status bar.
        let statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
            document.getElementById('statusBar')
        );
        statusBar.bind(spread);
        
        // Access active worksheet.
        let sheet = spread.getActiveSheet();

        // Add values to worksheet.
        sheet.setArray(1, 1, [
            ['Id', 'Name', 'Age', 'Grade'],
            [1000, 'Tom', 23, 98],
            [1001, 'Bob', 22, 80],
            [1002, 'Tony', 23, 99]
        ]);
        
        // Set column width.
        sheet.setColumnWidth(1, 80);
        sheet.setColumnWidth(2, 80);
        sheet.setColumnWidth(3, 80);
        sheet.setColumnWidth(4, 80);

        // Define button click function.
        document.getElementById("btn1").onclick = () => {

            // Execute startEdit command.
            // This will trigger EditStarting event.
            spread.commandManager().execute({ cmd: "startEdit", sheetName: "Sheet1" });

            // Execute changeEditorStatus command to switch the editor status Enter when editing a cell.
            // This will trigger EditorStatusChanged event.
            spread.commandManager().execute({cmd: "changeEditorStatus", sheetName: "Sheet1"});
        }
    </script>
</body>