XLSX: Work with cells on XLSX page

In This Topic

WebSpreadsheetEditorControlJS control allows to work (view, add, edit and delete) with cells of XLSX worksheet in web browser.

Cells can be changed manually using mouse/keyboard or programmatically.

Add a cell to the XLSX worksheet

If you want to add a cell to the focused XLSX worksheet using mouse, you should do the following steps:

Click the right mouse button on the cell, where you want to insert the new cell, context menu will appear, select "Insert cell and shift right" or "Insert cell and shift down" menu in context menu, the new cell will be added to the worksheet.

Here is JavaScript code that demonstrates how to add a cell to the focused XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class

// get spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();

// insert empty cells in range of selected cells and shift columns to the right
spreadsheetEditorControl.insertCellsAndShiftRight();

// insert empty cells in range of selected cells and shift rows to down
spreadsheetEditorControl.insertCellsAndShiftDown();

Copy and paste cells of XLSX worksheet

If you want to copy and paste the selected cells of XLSX worksheet using mouse, you should do the following steps:

Select "Edit" tab in WebSpreadsheetDocumentEditorControlJS control.
Select cells, which should be copied.
Press "Ctrl+C" key OR click the "Copy content" button OR click the right mouse button on selected cells and select "Copy" menu in context menu.
Focus on the cell, where you want to paste the cells.
Press "Ctrl+V" key OR click the "Paste content" button OR click the right mouse button on selected cells and select "Paste" menu in context menu.

Here is JavaScript code that demonstrates how to copy and paste cells of XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class

// get spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();

// copy content (selected cells, cell text, etc) to the clipboard
spreadsheetEditorControl.doCopy();

// paste content (selected cells, cell text, etc) from the clipboard
spreadsheetEditorControl.doPaste();

Cut and paste cells of XLSX worksheet

If you want to cut and paste the selected cells of XLSX worksheet using mouse, you should do the following steps:

Select "Edit" tab in WebSpreadsheetDocumentEditorControlJS control.
Select cells, which should be cut.
Press "Ctrl+X" key OR click the "Cut content" button OR click the right mouse button on selected cells and select "Cut" menu in context menu.
Focus on cell, where you want to paste the cells.
Press "Ctrl+V" key OR click the "Paste content" button OR click the right mouse button on selected cells and select "Paste" menu in context menu.

Here is JavaScript code that demonstrates how to cut and paste the cell of XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class

// get spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();

// cut content(selected cells, cell text, etc) to the clipboard
spreadsheetEditorControl.doCut();

// paste content (selected cells, cell text, etc) from the clipboard
spreadsheetEditorControl.doPaste();

Change value of focused cell programmatically

Here is JavaScript code that demonstrates how to change the value of focused cell of XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class

// get the spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();


// get value or formula of focused cell
var cellValue = spreadsheetEditorControl.get_FocusedCellValue();

// set value or formula of focused cell
spreadsheetEditorControl.set_FocusedCellValue("0");

Change the value of focused cell using textbox in cell region (internal editor)

If you want to change the value of focused cell of XLSX worksheet using mouse, you should do the following steps:

Double click on the cell that should be changed.
Change the cell value.
Press "Enter" or "Tab" key OR click the "Apply change" button in formula panel.

Change the value of focused cell using textbox in formula bar (external editor)

If you want to change the value of focused cell of XLSX worksheet using mouse, you should do the following steps:

Click on the cell that should be changed.
Set cursor to the textbox in formula panel.
Change the cell value.
Press "Enter" or "Tab" key OR click the "Apply change" button in formula panel.

Change the text number format of selected cells of XLSX worksheet

If you want to change the number format of selected cells of XLSX worksheet using mouse, you should do the following steps:

Select "Home" tab in WebSpreadsheetDocumentEditorControlJS control.
Select cells, whose number format should be changed.
Click the "Currency number format" button if the number format of text should be changed to Currency format.
Click the "Percent number format" button if the number format of text should be changed to Percent format.
Select the number format of text in the "Number format" dropdown element if you want to select the number format from a list of all supported formats.

Here is JavaScript code that demonstrates how to change the text number format of focused cell of XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class

// get the number format of focused cell
var cellValue = _spreadsheetDocumentEditorControl.get_NumberingFormat();

// set the number format of selected cells
_spreadsheetDocumentEditorControl.set_NumberingFormat("0");

Change the font properties of selected cells of XLSX worksheet

If you want to change the font properties of selected cells of XLSX worksheet using mouse, you should do the following steps:

Select "Home" tab in WebSpreadsheetDocumentEditorControlJS control.
Select cells, whose font properties should be changed.
Use the dropdown elements "Font name" and "Font size" if you want to change the font of selected cells.
Click on buttons "Bold text", "Italic text", "Underline text" or "Strikethrought text" if you want to change bold/italic/underline/strikethrough state of text of selected cells.
Use the color picker "Font color" if you want to change the font color of selected cells.

Here is JavaScript code that demonstrates how to change the font properties of focused cells of XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class


// get the font name for focused cell
var fontName = _spreadsheetDocumentEditorControl.get_FontName();
// set new font name for selected cells
_spreadsheetDocumentEditorControl.set_FontName("Impact");

// get the font size for focused cell
var fontSize = _spreadsheetDocumentEditorControl.get_FontSize();
// set new font size for selected cells
_spreadsheetDocumentEditorControl.set_FontSize(16);


// get the bold status of text of focused cell
var isBold = _spreadsheetDocumentEditorControl.get_IsFontBold();
// set new bold status for text in selected cells
_spreadsheetDocumentEditorControl.set_IsFontBold(true);

// get the italic status of text of focused cell
var isItalic = _spreadsheetDocumentEditorControl.get_IsFontItalic();
// set new italic status for text in selected cells
_spreadsheetDocumentEditorControl.set_IsFontItalic(true);

// get the underline status of text of focused cell
var isUnderline = _spreadsheetDocumentEditorControl.get_IsFontUnderline();
// set new underline status for text in selected cells
_spreadsheetDocumentEditorControl.set_IsFontUnderline(true);

// get the strikeout status of text of focused cell
var isStrikeout = _spreadsheetDocumentEditorControl.get_IsFontStrikeout();
// set new strikeout status for text in selected cells
_spreadsheetDocumentEditorControl.set_IsFontStrikeout(true);


// get font color (for example, "rgba(0,0,0,1)") for focused cell
var fontColor = _spreadsheetDocumentEditorControl.get_FontColor();

// get a string that represents HTML color ("black", "red", "transparent", "rgb(255,255,255)", "rgba(255,255,255,0.5)")
var htmlColor = "teal";
// set new font color for selected cells
_spreadsheetDocumentEditorControl.set_FontColor(htmlColor);

Change the text properties of selected cells of XLSX worksheet

If you want to change the text properties of selected cells of XLSX worksheet using mouse, you should do the following steps:

Select "Home" tab in WebSpreadsheetDocumentEditorControlJS control.
Select cells, whose text properties should be changed.
Click on buttons "Align left", "Center" or "Align right" if you want to change the horizontal text alignment of selected cells.
Click on buttons "Top align", "Middle align" or "Bottom align" if you want to change the vertical text alignment of selected cells.

Here is JavaScript code that demonstrates how to change the text properties of focused cells of XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class


// get the text horizontal alignment for focused cell
var textHorizontalAlign = _spreadsheetDocumentEditorControl.get_TextHorizontalAlign();

// create value that defines horizontal alignment
var horizontalAlign = Vintasoft.Imaging.Office.WebTextHorizontalAlignEnumJS("Center");
// set new text horizontal alignment for selected cells
_spreadsheetDocumentEditorControl.set_TextHorizontalAlign(horizontalAlign);


// get the text vertical alignment for focused cell
var textVerticalAlign = _spreadsheetDocumentEditorControl.get_TextVerticalAlign();

// create value that defines vertical alignment
var verticalAlign = Vintasoft.Imaging.Office.WebTextVerticalAlignEnumJS("Bottom");
// set new text vertical alignment for selected cells
_spreadsheetDocumentEditorControl.set_TextVerticalAlign(verticalAlign);

Change the background color of selected cells of XLSX worksheet

If you want to change the background color of selected cells of XLSX worksheet using mouse, you should do the following steps:

Select "Home" tab in WebSpreadsheetDocumentEditorControlJS control
Select cells, whose background color should be changed.
Use the color picker "Fill color"

Here is JavaScript code that demonstrates how to change the background color of focused cells of XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class

// get the background color (for example, "rgba(255,255,225,1)") of focused cell
var backgroundColor = _spreadsheetDocumentEditorControl.get_FillColor();

// create a string that represents HTML color ("black", "red", "transparent", "rgb(255,255,255)", "rgba(255,255,255,0.5)")
var htmlColor = "rgb(200,150,200)";
// set new background color for selected cells
_spreadsheetDocumentEditorControl.set_FillColor(htmlColor);

Change the border of selected cells of XLSX worksheet

If you want to change the border of selected cells of XLSX worksheet using mouse, you should do the following steps:

Select "Edit" tab in WebSpreadsheetDocumentEditorControlJS control
Select cells, whose borders should be changed.
Click on buttons "All borders", "Thick Outside Borders" or "Cell Borders".

Here is JavaScript code that demonstrates how to change the border of focused cells of XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class

// get the border color (for example, "rgba(255,255,225,1)") of focused cell
var borderColor = _spreadsheetDocumentEditorControl.get_BordersColor();

// create a string that represents HTML color ("black", "red", "transparent", "rgb(255,255,255)", "rgba(255,255,255,0.5)")
var htmlColor = "rgb(200,150,200)";
// set new border color for selected cells
_spreadsheetDocumentEditorControl.set_BordersColor(htmlColor);

Clear contents of selected cells of XLSX worksheet

If you want to clear contents of the selected cells of XLSX worksheet using mouse, you should do the following steps:

Select cells, whose content should be cleared.
Click the right mouse button on selected cells and select "Clear Contents" menu in context menu.

Here is JavaScript code that demonstrates how to clear contents of cells of XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class

// get spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();

// clear contents (value and formula) of selected cells
spreadsheetEditorControl.clearCellsContent();

Merge and unmerge cells of XLSX worksheet

If you want to merge and unmerge of selected cells of XLSX worksheet using mouse, you should do the following steps:

Select "Edit" tab in WebSpreadsheetDocumentEditorControlJS control
Select cells, which should be merged or unmerged.
Click on button "Merge Cells" if you want to merge selected cells.
Click on button "Unmerge Cells" if you want to unmerge selected cells.

Here is JavaScript code that demonstrates how to merge and unmerge cells of XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class

// get spreadsheet editor
var _spreadsheetDocumentEditorControl = _spreadsheetDocumentEditorControl.get__spreadsheetDocumentEditorControl();


// merges the selected cells
_spreadsheetDocumentEditorControl.mergeCells();

// unmerges the selected cells
_spreadsheetDocumentEditorControl.unmergeCells();

Delete a cell from XLSX worksheet

If you want to delete a cell from the focused XLSX worksheet using mouse, you should do the following steps:

Click the right mouse button on the cell, which you want to remove, context menu will appear, select "Delete cell and shift left" or "Delete cell and shift up" menu in context menu, the focused cell will be deleted from worksheet.

Here is JavaScript code that demonstrates how to delete a cell from XLSX worksheet:

JavaScript

// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class

// get spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();

// remove selected cells and shift columns to the left
spreadsheetEditorControl.removeCellsAndShiftLeft();

// remove selected cells and shift rows to up
spreadsheetEditorControl.removeCellsAndShiftUp();

Send Feedback