Ignite UI™ API Documentation

ui.igSpreadsheet

Overview
Options
Events
Methods
Theming

The igSpreadsheet control allows visualization of spreadsheet data, represented by the data model supported by the Infragistics Javascript Excel Library comprising of Workbooks, Worksheets, Cells, Formulas and more.

Code Sample

 
				<!DOCTYPE html>
				<html>
				<head>
					<title>igSpreadsheet Overview</title>
					<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
					<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
					<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

					<!-- Ignite UI Required Combined JavaScript Files -->
					<script src="js/infragistics.loader.js" type="text/javascript"></script>

					</head>
					<body>
						<div id="spreadsheet"></div>
						<script type="text/javascript">
							$.ig.loader({
								scriptPath: "js/",
								cssPath: "css/",
								resources: "igSpreadsheet",
								ready: function () {
									$("#spreadsheet").igSpreadsheet({
										height: "600",
										width: "100%",
										activeCell: "D4"
									});
								}
							});
						</script>
					</body>
					</html>

Related Samples

igSpreadsheet Overview

activeCell

Type:: string
Default:: null

Returns or sets the A1 format address of the current active cell within the selected worksheet.

Code Sample

 
				//Initialize
				$(".selector").igSpreadsheet({
					activeCell : "B4"
				});

				// Get
				var activeCell = $(".selector").igSpreadsheet("option", "activeCell");

				// Set
				$(".selector").igSpreadsheet("option", "activeCell", "B4");

activeWorksheet

Type:: object
Default:: null

Returns or sets the Worksheet from the workbook whose content should be displayed within the control.

Code Sample

 
		//Initialize
		var wb = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
		var sheet1 = wb.worksheets().add("sheet1");
		var sheet2 = wb.worksheets().add("sheet2");
		var sheet3 = wb.worksheets().add("sheet3");
		$(".selector").igSpreadsheet({
			workbook: wb,
			activeWorksheet: sheet2
		});
	
		//Get
		var activeWorksheet = $(".selector").igSpreadsheet("option", "activeWorksheet");
	
		//Set
		$(".selector").igSpreadsheet("option", "activeWorksheet", sheet2);

allowAddWorksheet

Type:: bool
Default:: true

Returns or sets a boolean indicating whether the spreadsheet allows adding worksheets.

Code Sample

 
		//Initialize
		$(".selector").igSpreadsheet({
			allowAddWorksheet: false
		});
	
		//Get
		var allowAddWorksheet = $(".selector").igSpreadsheet("option", "allowAddWorksheet");
	
		//Set
		$(".selector").igSpreadsheet("option", "allowAddWorksheet", false);

allowDeleteWorksheet

Type:: bool
Default:: true

Returns or sets a boolean indicating whether the spreadsheet allows deleting worksheets.

Code Sample

 
		//Initialize
		$(".selector").igSpreadsheet({
			allowDeleteWorksheet: false
		});
	
		//Get
		var allowDeleteWorksheet = $(".selector").igSpreadsheet("option", "allowDeleteWorksheet");
	
		//Set
		$(".selector").igSpreadsheet("option", "allowDeleteWorksheet", false);

areGridlinesVisible

Type:: bool
Default:: true

Returns or sets a boolean indicating if the grid lines are displayed in the selected worksheets.

Code Sample

 
		//Initialize
		$(".selector").igSpreadsheet({
			areGridlinesVisible: false
		});
	
		//Get
		var areGridlinesVisible = $(".selector").igSpreadsheet("option", "areGridlinesVisible");
	
		//Set
		$(".selector").igSpreadsheet("option", "areGridlinesVisible", false);

areHeadersVisible

Type:: bool
Default:: true

Returns or sets a boolean indicating if the row and column headers are displayed for the selected worksheets.

Code Sample

 
		//Initialize
		$(".selector").igSpreadsheet({
			areHeadersVisible: false
		});
	
		//Get
		var areHeadersVisible = $(".selector").igSpreadsheet("option", "areHeadersVisible");
	
		//Set
		$(".selector").igSpreadsheet("option", "areHeadersVisible", false);

enterKeyNavigationDirection

Type:

enumeration

Default:

down
Returns or sets an enumeration indicating the direction of the cell adjacent to the activeCell that should be activated when the enter key is pressed. This property is only used if the isEnterKeyNavigationEnabled is set to true. Also, the reverse direction is
navigated when Shift + Enter are pressed.
Members
- down
- Type:string
- The cell below should be activated.
- right
- Type:string
- The cell to the right should be activated.
- up
- Type:string
- The cell above should be activated.
- left
- Type:string
- The cell to the left should be activated.
Code Sample
```
 
		//Initialize
		$(".selector").igSpreadsheet({
			enterKeyNavigationDirection: "right"
		});
	
		//Get
		var enterKeyNavigationDirection = $(".selector").igSpreadsheet("option", "enterKeyNavigationDirection");
	
		//Set
		$(".selector").igSpreadsheet("option", "enterKeyNavigationDirection", "right");
	 
```
height

Type:

enumeration

Default:

null
The height of the spreadsheet. It can be set as a number in pixels, string (px) or percentage (%).
Members
- string
- Type:string
- The widget height can be set in pixels (px) and percentage (%).
- number
- Type:number
- The widget height can be set as a number.
Code Sample
```
 
				//Initialize
				$(".selector").igSpreadsheet({
					height : "800px"
				});
				// Get
				var height = $(".selector").igSpreadsheet("option", "height");
				// Set
				$(".selector").igSpreadsheet("option", "height", "800px");
			 
```

isEnterKeyNavigationEnabled

Type:: bool
Default:: true

Returns or sets a boolean indicating whether the adjacent cell indicated by the enterKeyNavigationDirection should be navigated to when the enter key is pressed.

Code Sample

 
		//Initialize
		$(".selector").igSpreadsheet({
			isEnterKeyNavigationEnabled: false
		});
	
		//Get
		var isEnterKeyNavigationEnabled = $(".selector").igSpreadsheet("option", "isEnterKeyNavigationEnabled");
	
		//Set
		$(".selector").igSpreadsheet("option", "isEnterKeyNavigationEnabled", false);

isFormulaBarVisible

Type:: bool
Default:: true

Returns or sets a boolean indicating if the formula bar is displayed within the Spreadsheet.

Code Sample

 
		//Initialize
		$(".selector").igSpreadsheet({
			isFormulaBarVisible: false
		});
	
		//Get
		var isFormulaBarVisible = $(".selector").igSpreadsheet("option", "isFormulaBarVisible");
	
		//Set
		$(".selector").igSpreadsheet("option", "isFormulaBarVisible", false);

isInEndMode

Type:

bool

Default:

false
Returns or sets a boolean indicating whether the control is in "End mode".
End mode is a mode that affects certain keyboard navigation such as navigating with the arrow keys. For example when in
end mode and one presses the right arrow, the activeCell will be changed to be the first cell to the right of the current ActiveCell
that has a value (even if the value is ""). If there were no cells to the right with a value then it would activate the right most cell in that row. End
mode will end automatically such as when one presses an arrow key.
Code Sample
```
 
		//Initialize
		$(".selector").igSpreadsheet({
			isInEndMode: true
		});
	
		//Get
		var isInEndMode = $(".selector").igSpreadsheet("option", "isInEndMode");
	
		//Set
		$(".selector").igSpreadsheet("option", "isInEndMode", true);
	 
```
isScrollLocked

Type:

bool

Default:

null
Returns or sets a boolean indicating whether the scroll lock key is toggled.
This property is used when certain keys are pressed while the control has focus. For example
if an arrow key is pressed while the scroll lock is enabled the cell area will be scrolled rather than changing
the active cell. Note: This property is not maintained/changed by the control. It is just queried when
performing actions that consider whether the scroll lock is enabled.
Code Sample
```
 
		//Initialize
		$(".selector").igSpreadsheet({
			isScrollLocked: true
		});
	
		//Get
		var isScrollLocked = $(".selector").igSpreadsheet("option", "isScrollLocked");
	
		//Set
		$(".selector").igSpreadsheet("option", "isScrollLocked", true);
	 
```

isUndoEnabled

Type:: bool
Default:: true

Returns or sets a boolean indicating whether undo is enabled for the control.

Code Sample

 
		//Initialize
		$(".selector").igSpreadsheet({
			isUndoEnabled: false
		});
	
		//Get
		var isUndoEnabled = $(".selector").igSpreadsheet("option", "isUndoEnabled");
	
		//Set
		$(".selector").igSpreadsheet("option", "isUndoEnabled", false);

nameBoxWidth

Type:: number
Default:: 102

Returns or sets the width of the name box within the formula bar.

Code Sample

 
		//Initialize
		$(".selector").igSpreadsheet({
			nameBoxWidth: 150
		});
	
		//Get
		var nameBoxWidth = $(".selector").igSpreadsheet("option", "nameBoxWidth");
	
		//Set
		$(".selector").igSpreadsheet("option", "nameBoxWidth", 150);

selectedWorksheets

Type:: object
Default:: null

Type="ig.excel.Worksheet[]" Returns or sets an array of the Worksheets whose tabs are selected.

Code Sample

 
		//Initialize
		var wb = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
		var sheet1 = wb.worksheets().add("sheet1");
		var sheet2 = wb.worksheets().add("sheet2");
		var sheet3 = wb.worksheets().add("sheet3");
		$(".selector").igSpreadsheet({
			workbook: wb,
			activeWorksheet: sheet1,
			selectedWorksheets: [sheet1, sheet3]
		});
	
		//Get
		var selectedWorksheets = $(".selector").igSpreadsheet("option", "selectedWorksheets");
	
		//Set
		$(".selector").igSpreadsheet("option", "selectedWorksheets", [sheet1, sheet3]);

selectionMode

Type:

enumeration

Default:

normal
Returns or sets a value indicating how the selection is updated when interacting with the cells via the mouse or keyboard.
Members
- normal
- Type:string
- The selection is replaced when dragging the mouse to select a cell or range of cells. Similarly when navigating via the keyboard a new selection is created. One may add a new range by holding the Ctrl key and using the mouse and one may alter the selection range containing the active cell by holding the Shift key down while clicking with the mouse or navigating with the keyboard such as with the arrow keys.
- extendSelection
- Type:string
- The selection range in the cellRanges representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard.
- addToSelection
- Type:string
- New cell ranges are added to the cellRanges without needing to hold down the ctrl key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing Shift+F8.
Code Sample
```
 
		//Initialize
		$(".selector").igSpreadsheet({
			selectionMode: "extendSelection"
		});
	
		//Get
		var selectionMode = $(".selector").igSpreadsheet("option", "selectionMode");
	
		//Set
		$(".selector").igSpreadsheet("option", "selectionMode", "extendSelection");
	 
```

validationInputMessagePosition

Type:: object
Default:: null

Returns or sets the position of the screen tip used to display the input message for the data validation rule associated with the active cell.

The provided object should have numeric properties called x and y.

Code Sample

 
		//Initialize
		$(".selector").igSpreadsheet({
			validationInputMessagePosition: { x: 50, y: 50 }
		});
	
		//Get
		var validationInputMessagePosition = $(".selector").igSpreadsheet("option", "validationInputMessagePosition");
	
		//Set
		$(".selector").igSpreadsheet("option", "validationInputMessagePosition", { x: 50, y: 50 });

width

Type:

enumeration

Default:

null
The width of the spreadsheet. It can be set as a number in pixels, string (px) or percentage (%).
Members
- string
- Type:string
- The widget width can be set in pixels (px) and percentage (%).
- number
- Type:number
- The widget width can be set as a number.
Code Sample
```
 
				// Initialize
				$(".selector").igSpreadsheet({
					width : "800px"
				});
				// Get
				var width = $(".selector").igSpreadsheet("option", "width");
				// Set
				$(".selector").igSpreadsheet("option", "width", "800px");
			 
```

workbook

Type:: object
Default:: null

Returns or sets the workbook whose information is displayed in the control.

Code Sample

 
		//Initialize
		var wb = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
		wb.worksheets().add("sheet1");
		$(".selector").igSpreadsheet({
			workbook: wb
		});
	
		//Get
		var workbook = $(".selector").igSpreadsheet("option", "workbook");
	
		//Set
		$(".selector").igSpreadsheet("option", "workbook", wb);

zoomLevel

Type:: number
Default:: 100

Returns or sets the magnification of the selected worksheets.

Code Sample

 
		//Initialize
		$(".selector").igSpreadsheet({
			zoomLevel: 150
		});
	
		//Get
		var zoomLevel = $(".selector").igSpreadsheet("option", "zoomLevel");
	
		//Set
		$(".selector").igSpreadsheet("option", "zoomLevel", 150);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

actionExecuted

Cancellable:

false

Invoked when an action is executed on the Spreadsheet.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample
```
 
		//Delegate
		$(document).delegate(".selector"), "igspreadsheetactionexecuted", function (evt, ui) {
			...
		});
	
		//Initialize
		$(".selector").igSpreadsheet({
			actionExecuted: function(evt, ui) {...}
		});
	 
```
actionExecuting

Cancellable:

true

Invoked when an action is about to be executed by the Spreadsheet.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample
```
 
		//Delegate
		$(document).delegate(".selector"), "igspreadsheetactionexecuting", function (evt, ui) {
			...
		});
	
		//Initialize
		$(".selector").igSpreadsheet({
			actionExecuting: function(evt, ui) {...}
		});
	 
```
activeCellChanged

Cancellable:

false

Invoked when the activeCell of the Spreadsheet has changed.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample
```
 
		//Delegate
		$(document).delegate(".selector"), "igspreadsheetactivecellchanged", function (evt, ui) {
			...
		});
	
		//Initialize
		$(".selector").igSpreadsheet({
			activeCellChanged: function(evt, ui) {...}
		});
	 
```
activePaneChanged

Cancellable:

false

Invoked when the activePane of the Spreadsheet has changed.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample
```
 
		//Delegate
		$(document).delegate(".selector"), "igspreadsheetactivepanechanged", function (evt, ui) {
			...
		});
	
		//Initialize
		$(".selector").igSpreadsheet({
			activePaneChanged: function(evt, ui) {...}
		});
	 
```
activeWorksheetChanged

Cancellable:

false

Invoked when the activeWorksheet of the Spreadsheet has changed.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample
```
 
		//Delegate
		$(document).delegate(".selector"), "igspreadsheetactiveworksheetchanged", function (evt, ui) {
			...
		});
	
		//Initialize
		$(".selector").igSpreadsheet({
			activeWorksheetChanged: function(evt, ui) {...}
		});
	 
```
editRangePasswordNeeded

Cancellable:

true

Invoked when the Spreadsheet is performing an operation on a protected Worksheet and there is a single range that may be unlocked to allow the operation to be performed.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample
```
 
		//Delegate
		$(document).delegate(".selector"), "igspreadsheeteditrangepasswordneeded", function (evt, ui) {
			...
		});
	
		//Initialize
		$(".selector").igSpreadsheet({
			editRangePasswordNeeded: function(evt, ui) {...}
		});
	 
```
hyperlinkExecuting

Cancellable:

true

Invoked when a hyperlink is being followed in the Spreadsheet.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample
```
 
		//Delegate
		$(document).delegate(".selector"), "igspreadsheethyperlinkexecuting", function (evt, ui) {
			...
		});
	
		//Initialize
		$(".selector").igSpreadsheet({
			hyperlinkExecuting: function(evt, ui) {...}
		});
	 
```
selectionChanged

Cancellable:

false

Invoked when the selection for a ig.spreadsheet.SpreadsheetPane of the Spreadsheet is changed.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample
```
 
		//Delegate
		$(document).delegate(".selector"), "igspreadsheetselectionchanged", function (evt, ui) {
			...
		});
	
		//Initialize
		$(".selector").igSpreadsheet({
			selectionChanged: function(evt, ui) {...}
		});
	 
```
userPromptDisplaying

Cancellable:

true

Invoked when the user will be prompted with a message regarding an operation that is being performed.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample
```
 
		//Delegate
		$(document).delegate(".selector"), "igspreadsheetuserpromptdisplaying", function (evt, ui) {
			...
		});
	
		//Initialize
		$(".selector").igSpreadsheet({
			userPromptDisplaying: function(evt, ui) {...}
		});
	 
```
workbookDirtied

Cancellable:

false

Invoked when a change has been made to the workbook that might require a save.
Note: This event is invoked asynchronously with regards to the change(s) that
have occurred. Also some changes alone are not considered to dirty the Workbook even though it
does change state on the Workbook or one of its subobjects. An example of that would be a zoom
type operation (e.g. changing the magnificationInNormalView).
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample
```
 
		//Delegate
		$(document).delegate(".selector"), "igspreadsheetworkbookdirtied", function (evt, ui) {
			...
		});
	
		//Initialize
		$(".selector").igSpreadsheet({
			workbookDirtied: function(evt, ui) {...}
		});
	 
```

Show Details

destroy

.igSpreadsheet( "destroy" );

Destroys the widget.

Code Sample

 
				var executed = $(".selector").igSpreadsheet("destroy");

executeAction

.igSpreadsheet( "executeAction", action:object );

Return Type:

bool

Return Type Description:

A boolean indicating if the action was performed.
Executes the action associated with the specified id.
- action
- Type:object
- An enumeration or string that identifies the action to execute.
Code Sample
```
 
				var executed = $(".selector").igSpreadsheet("executeAction", "clearContents");
			 
```
flush

.igSpreadsheet( "flush" );
Forces any pending deferred work to render on the spreadsheet before continuing.
Code Sample
```
 
				var executed = $(".selector").igSpreadsheet("flush");
			 
```
getActivePane

.igSpreadsheet( "getActivePane" );
Returns an object that represents the pane with the focus.
Code Sample
```
 
				var activePane = $(".selector").igSpreadsheet("getActivePane");
			 
```
getActiveSelection

.igSpreadsheet( "getActiveSelection" );
Returns an object that represents the current selection of the active pane.
Code Sample
```
 
				var activeSelection = $(".selector").igSpreadsheet("getActiveSelection");
			 
```
getActiveSelectionCellRangeFormat

.igSpreadsheet( "getActiveSelectionCellRangeFormat" );
Returns an object used to get the formatting of the activeCell and where modifications are applied to the entire active selection.
Any changes made to this object will affect all the objects in the selection. So for example, the
Font.Name may return "Arial" because the active cell has that as its resolved font name even though the other
cells are using a different font but if you set the Font.Name of this object to "Arial" then all the objects
affected by the selection will have their Font.Name updated to that value.
Code Sample
```
 
				var activeSelectionCellRangeFormat = $(".selector").igSpreadsheet("getActiveSelectionCellRangeFormat");
			 
```
getIsRenamingWorksheet

.igSpreadsheet( "getIsRenamingWorksheet" );

Return Type:

bool
Returns a boolean indicating if the user is currently editing the name of the active worksheet.
Code Sample
```
 
				var isRenamingWorksheet = $(".selector").igSpreadsheet("getIsRenamingWorksheet");
			 
```
getPanes

.igSpreadsheet( "getPanes" );
Returns an array of the panes for the activeWorksheet.

returnType="ig.spreadsheet.SpreadsheetPane[]".
Code Sample
```
 
				var panes = $(".selector").igSpreadsheet("getPanes");
			 
```
styleUpdated

.igSpreadsheet( "styleUpdated" );
Notify the spreadsheet that style information used for rendering the spreadsheet may have been updated.
Code Sample
```
 
				var executed = $(".selector").igSpreadsheet("styleUpdated");
			 
```

ui-igspreadsheet-activatenexthiddentab

Get the class applied to the tab item area button that is used to activate the next out of view tab.
ui-igspreadsheet-activateprevioushiddentab

Get the class applied to the tab item area button that is used to activate the previous out of view tab.
ui-igspreadsheet-addnewworksheet

Get the class applied to the tab item area button that is used to create a new worksheet.
ui-igspreadsheet-automaticgridline

Get the class whose style information is used to render the lines between rows and columns when a custom color has not been specified.
ui-igspreadsheet-cellselection

Get the class whose style information is used to render the selection rect.
ui-igspreadsheet-cellselectionhandle

Get the class whose style information is used to render the grip handle on the selection rect.
ui-igspreadsheet-columnheader

Get the class whose style information is used to render the column headers.
ui-igspreadsheet-columnheaderarea

Get the class applied to the element where the column headers are rendered.
ui-igspreadsheet-columnheader-hover

Get the class whose style information is used to render the column headers when the mouse is over a header.
ui-igspreadsheet-columnheader-selected

Get the class whose style information is used to render the column headers when the column is selected.
ui-igspreadsheet-columnheader-selectedcells

Get the class whose style information is used to render the column headers when some cells within the column are selected.
ui-igspreadsheet-columnsplitter

Get the class applied to the vertical splitter bar that is shown when the worksheet is split horizontally.
ui-igspreadsheet-columnsplitterpreview

Get the class applied to the element that is displayed while dragging the vertical column splitter.
ui-igspreadsheet-formulabar

Get the class applied to the area that contains the elements for the formula bar.
ui-igspreadsheet-formulabarbuttoncontainer

Get the class applied to the area within the formula bar containing the enter and cancel buttons.
ui-igspreadsheet-formulabarcancelbutton

Get the class applied to the cancel button within the formula bar.
ui-igspreadsheet-formulabarenterbutton

Get the class applied to the enter button within the formula bar.
ui-igspreadsheet-formulabarexpandbutton

Get the class applied to the button within the formula bar used to expand/collapse the height of the formula bar.
ui-igspreadsheet-formulabarexpandbutton-open

Get the class applied to the formula bar expand button when the formula bar is expanded.
ui-igspreadsheet-formulabartextareacontainer

Get the class applied to the element containing the text area within the formula bar.
ui-igspreadsheet-formulabartextareasplitter

Get the class applied to the element used to resize the formula bar text area.
ui-igspreadsheet-header-resizeline

Get the class whose style information is used to render the preview line displayed while a header is being resized.
ui-igspreadsheet-inputmessage

Get the class applied to the element that represents the input message from the data validation of the current active cell.
ui-igspreadsheet-inputmessage-content

Get the class applied to the content/body of the input message.
ui-igspreadsheet-inputmessage-title

Get the class applied to the title of the input message.
ui-igspreadsheet-invaliddata

Get the class whose style information is used to render the invalid data adorner.
ui-igspreadsheet-nameboxcontainer

Get the class applied to the area that contains the namebox within the formula bar.
ui-igspreadsheet-nameboxsplitter

Get the class applied to the element after the namebox that is used to adjust the width of the name box.
ui-igspreadsheet-rowheader

Get the class whose style information is used to render the row headers.
ui-igspreadsheet-rowheaderarea

Get the class applied to the element where the row headers are rendered.
ui-igspreadsheet-rowheader-hover

Get the class whose style information is used to render the row headers when the mouse is over a header.
ui-igspreadsheet-rowheader-selected

Get the class whose style information is used to render the row headers when the row is selected.
ui-igspreadsheet-rowheader-selectedcells

Get the class whose style information is used to render the row headers when some cells within the row are selected.
ui-igspreadsheet-rowsplitter

Get the class applied to the horizontal splitter bar that is shown when the worksheet is split vertically.
ui-igspreadsheet-rowsplitterpreview

Get the class applied to the element that is displayed while dragging the horizontal row splitter.
ui-igspreadsheet-scrollbar-button-down

Get the class applied to the down scrollbar arrow.
ui-igspreadsheet-scrollbar-button-left

Get the class applied to the left scrollbar arrow.
ui-igspreadsheet-scrollbar-button-right

Get the class applied to the right scrollbar arrow.
ui-igspreadsheet-scrollbar-button-up

Get the class applied to the up scrollbar arrow.
ui-igspreadsheet-scrollbar-horizontal

Get the class applied to the horizontal scrollbar.
ui-igspreadsheet-scrollbar-thumb-horizontal

Get the class applied to the thumb on the vertical scrollbar.
ui-igspreadsheet-scrollbar-thumb-vertical

Get the class applied to the thumb on the horizontal scrollbar.
ui-igspreadsheet-scrollbar-track-down

Get the class applied to the track between the up button and the scrollbar thumb.
ui-igspreadsheet-scrollbar-track-left

Get the class applied to the track between the left button and the scrollbar thumb.
ui-igspreadsheet-scrollbar-track-right

Get the class applied to the track between the right button and the scrollbar thumb.
ui-igspreadsheet-scrollbar-track-up

Get the class applied to the track between the up button and the scrollbar thumb.
ui-igspreadsheet-scrollbar-vertical

Get the class applied to the vertical scrollbar.
ui-igspreadsheet-scrollfirsttab

Get the class applied to the tab item area button that is used to scroll to the first tab.
ui-igspreadsheet-scrolllasttab

Get the class applied to the tab item area button that is used to scroll to the last tab.
ui-igspreadsheet-scrollnexttab

Get the class applied to the tab item area button that is used to scroll to the next tab.
ui-igspreadsheet-scrollprevioustab

Get the class applied to the tab item area button that is used to scroll to the previous tab.
ui-igspreadsheet-selectall

Get the class applied to the select all button at the intersection between the row and column header areas.
ui-igspreadsheet-splitterintersection

Get the class applied to to the element that is displayed while dragging the vertical column splitter.
ui-igspreadsheet

Get the class applied to the main element.
ui-igspreadsheet-tabareabackground

Get the class applied to the element behind the tab area.
ui-igspreadsheet-tabareaborder

Get the class applied to the element that separates the tab area from the spreadsheet pane area.
ui-igspreadsheet-tabareasplitter

Get the class applied to the element between the tab area and the column scrollbar that is used to adjust the size of the tab area.
ui-igspreadsheet-tabdropindicator

Get the class applied to the element displayed during the dragging of a tab to indicate the new position.
ui-igspreadsheet-tabitem

Get the class applied to the element that represents the tab for a worksheet.
ui-igspreadsheet-tabitem-active

Get the class applied to the element that represents the active tab for a worksheet.
ui-igspreadsheet-tabitemarea

Get the class applied to the element where the tab buttons and items are rendered.
ui-igspreadsheet-tabitemcontent

Get the class applied to the element that contains the content for the tab for a worksheet.
ui-igspreadsheet-tabitem-dark

Get the class applied to the element that contains the content for the tab for a worksheet when the assigned color is calculated to be a dark color.
ui-igspreadsheet-tabitem-light

Get the class applied to the element that contains the content for the tab for a worksheet when the assigned color is calculated to be a light color.
ui-igspreadsheet-tabitem-protected

Get the class added to element that represents the tab for a protected worksheet.
ui-igspreadsheet-tabitem-selected

Get the class applied to the element that represents a worksheet tab when it is selected but is not active.
ui-igspreadsheet-tooltip ui-tooltip ui-widget-content ui-corner-all

Get the class applied to the spreadsheet's tooltip.
ui-html5-non-html5-supported-message ui-helper-clearfix ui-html5-non-html5

Get the class applied to main element, shown when the spreadsheet is opened in a non HTML5 compatible browser.

Ignite UI | Samples

ui.igSpreadsheet

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

activeCell

Code Sample

activeWorksheet

Code Sample

allowAddWorksheet

Code Sample

allowDeleteWorksheet

Code Sample

areGridlinesVisible

Code Sample

areHeadersVisible

Code Sample

enterKeyNavigationDirection

Members

Code Sample

height

Members

Code Sample

isEnterKeyNavigationEnabled

Code Sample

isFormulaBarVisible

Code Sample

isInEndMode

Code Sample

isScrollLocked

Code Sample

isUndoEnabled

Code Sample

nameBoxWidth

Code Sample

selectedWorksheets

Code Sample

selectionMode

Members

Code Sample

validationInputMessagePosition

Code Sample

width

Members

Code Sample

workbook

Code Sample

zoomLevel

Code Sample

actionExecuted

Code Sample

actionExecuting

Code Sample

activeCellChanged

Code Sample

activePaneChanged

Code Sample

activeWorksheetChanged

Code Sample

editRangePasswordNeeded

Code Sample

hyperlinkExecuting

Code Sample

selectionChanged

Code Sample

userPromptDisplaying

Code Sample

workbookDirtied

Code Sample

destroy

Code Sample

executeAction

Code Sample

flush

Code Sample

getActivePane

Code Sample

getActiveSelection