Ignite UI™ API Documentation

ui.igSpreadsheet

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:: "A1"

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);

brushes

Type:: object
Default:: {}

Returns or sets an object with brushes for areas of the spreadsheet. The property name should be an item in the SpreadsheetResourceId enumeration and the property value a string representing a brush. These brushes override any css styling for the associated object.

Code Sample

//Initialize
$(".selector").igSpreadsheet({
    brushes : {
        cellSelectionFill: "rgba(0,0,0,0.1)",
    }
});
 
// Get
var brushes = $(".selector").igSpreadsheet("option", "brushes");
 
// Set
$(".selector").igSpreadsheet("option", "brushes", { cellSelectionFill: "rgba(0,0,0,0.1)" });

enterKeyNavigationDirection

Type:: string
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.
down The cell below should be activated.
right The cell to the right should be activated
up The cell above should be activated.
left 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");

fixedDecimalPlaceCount

Type:: number
Default:: 2

Returns or sets the number of decimal places by which a whole number typed in during edit mode should be adjusted when
isFixedDecimalEnabled is true.

Code Sample

//Initialize
$(".selector").igSpreadsheet({
    isFixedDecimalEnabled : true,
    fixedDecimalPlaceCount: 3
});
 
//Get
var fixedDecimalPlaceCount = $(".selector").igSpreadsheet("option", "fixedDecimalPlaceCount");
 
//Set
$(".selector").igSpreadsheet("option", "fixedDecimalPlaceCount", 3);

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);

isFixedDecimalEnabled

Type:: bool
Default:: false

Returns or sets a boolean indicating whether a fixed decimal place is automatically added when a whole number is entered while in edit mode.

Code Sample

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

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:: false

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);

language
Inherited

Type:: string
Default:: "en"

Set/Get the locale language setting for the widget.

Code Sample

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

locale
Inherited

Type:: object
Default:: null

Set/Get the locale setting for the widget.

Code Sample

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

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);

regional
Inherited

Type:: enumeration
Default:: defaults

Set/Get the regional setting for the widget.

Code Sample

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

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:: string
Default:: "normal"

Returns or sets a value indicating how the selection is updated when interacting with the cells via the mouse or keyboard.
normal 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 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 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) {...}
});

activeTableChanged

Cancellable:: false

Invoked when the
activeTable of the
Spreadsheet has changed.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Delegate
$(document).delegate(".selector", "igspreadsheetactivetablechanged", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igSpreadsheet({
    activeTableChanged: 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) {...}
});

contextMenuOpening

Cancellable:: true

Invoked when a contextmenu is being opened for the
Spreadsheet.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Delegate
$(document).delegate(".selector", "igspreadsheetcontextmenuopening", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igSpreadsheet({
    contextMenuOpening: function(evt, ui) {...}
});

editModeEntered

Cancellable:: false

Invoked when the
Spreadsheet has started in-place editing of the
activeCell.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Delegate
$(document).delegate(".selector", "igspreadsheeteditmodeentered", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igSpreadsheet({
    editModeEntered: function(evt, ui) {...}
});

editModeEntering

Cancellable:: true

Invoked when the
Spreadsheet is about to start in-place editing of the
activeCell.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Delegate
$(document).delegate(".selector", "igspreadsheeteditmodeentering", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igSpreadsheet({
    editModeEntering: function(evt, ui) {...}
});

editModeExited

Cancellable:: false

Invoked when the
Spreadsheet has ended the in-place editing of the
activeCell.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Delegate
$(document).delegate(".selector", "igspreadsheeteditmodeexited", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igSpreadsheet({
    editModeExited: function(evt, ui) {...}
});

editModeExiting

Cancellable:: true

Invoked when the
Spreadsheet is about to end the in-place editing of the
activeCell.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Delegate
$(document).delegate(".selector", "igspreadsheeteditmodeexiting", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igSpreadsheet({
    editModeExiting: function(evt, ui) {...}
});

editModeValidationError

Cancellable:: false

Invoked when the
Spreadsheet is exiting edit mode and the new value for the
activeCell is not valid based on the criteria of that cell's
ig.excel.DataValidationRule.
The EditModeValidationError is raised while exiting edit mode if the new value for the
activeCell is not valid based on the criteria of that cell's
ig.excel.DataValidationRule.
Since the rule needs to evaluate the value of the cell and potentially other cell's in the Worksheet, the value is first applied to the cell(s) and then is validated. By default if the event is not handled and the
showErrorMessageForInvalidValue is true, a message box will be displayed to the end user to determine what action to take. One can handle this event and specify the action that should
be taken using the action.
Note:
The validation rule will not be evaluated if edit mode is being cancelled such as when the user presses Escape to cancel edit.
Note:
The action will default to
AcceptChange
if the ShowErrorMessageForInvalidValue of the validationRule is false; otherwise it will default to
ShowPrompt
.
Note:
Like Microsoft Excel, only the validation rule of the active cell is considered even if the update is affecting other cells in the selection.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Delegate
$(document).delegate(".selector", "igspreadsheeteditmodevalidationerror", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igSpreadsheet({
    editModeValidationError: 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

changeGlobalLanguage
Inherited

.igSpreadsheet( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample

$(".selector").igSpreadsheet("changeGlobalLanguage");
changeGlobalRegional
Inherited

.igSpreadsheet( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample

$(".selector").igSpreadsheet("changeGlobalRegional");
changeLocale

.igSpreadsheet( "changeLocale", $container:object );
- $container
- Type:object
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");
exportVisualData

.igSpreadsheet( "exportVisualData" );
Exports visual data from the spreadsheet to aid in unit testing.
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");
getActiveTable

.igSpreadsheet( "getActiveTable" );
Returns an object that represents the pane with the focus.
Code Sample

var activeTable = $(".selector").igSpreadsheet("getActiveTable");
getCellEditMode

.igSpreadsheet( "getCellEditMode" );
Returns an enumeration used to indicate the current edit mode state.
Code Sample

var cellEditMode = $(".selector").igSpreadsheet("getCellEditMode");
getIsInEditMode

.igSpreadsheet( "getIsInEditMode" );

Return Type:

bool
Returns a boolean indicating if the control is currently editing the value of the activeCell.
Code Sample

var isInEditMode = $(".selector").igSpreadsheet("getIsInEditMode");
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");
showFilterDialogForTable

.igSpreadsheet( "showFilterDialogForTable", worksheetTableColumn:object, spreadsheetFilterDialogOption:object );
Shows the filter dialog for the specified relative column of the filterSettings of the activeWorksheet.
- worksheetTableColumn
- Type:object
- A region whose filter is to be viewed or changed.
- spreadsheetFilterDialogOption
- Type:object
- Optional enumeration that specifies the initial display of the filter dialog.
Code Sample

var table = $(".selector").igSpreadsheet("option", "activeTable");
var executed = $(".selector").igSpreadsheet("showFilterDialogForTable", table.columns(0));
showFilterDialogForWorksheet

.igSpreadsheet( "showFilterDialogForWorksheet", relativeColumnIndex:number, spreadsheetFilterDialogOption:object );
Shows the filter dialog for the specified relative column of the filterSettings of the activeWorksheet.
- relativeColumnIndex
- Type:number
- A zero based column index relative to the region of the active worksheet.
- spreadsheetFilterDialogOption
- Type:object
- Optional enumeration that specifies the initial display of the filter dialog.
Code Sample

var executed = $(".selector").igSpreadsheet("showFilterDialogForWorksheet", 0);
showTopOrBottomDialogForTable

.igSpreadsheet( "showTopOrBottomDialogForTable", worksheetTableColumn:object );
Shows the top or bottom dialog for the specified relative column of the filterSettings of the activeWorksheet.
- worksheetTableColumn
- Type:object
- A region whose filter is to be viewed or changed.
Code Sample

var table = $(".selector").igSpreadsheet("option", "activeTable");
var executed = $(".selector").igSpreadsheet("showTopOrBottomDialogForTable", table.columns(0));
showTopOrBottomDialogForWorksheet

.igSpreadsheet( "showTopOrBottomDialogForWorksheet", relativeColumnIndex:number );
Shows the top or bottom dialog for the specified relative column of the filterSettings of the activeWorksheet.
- relativeColumnIndex
- Type:number
- A zero based column index relative to the region of the active worksheet.
Code Sample

var executed = $(".selector").igSpreadsheet("showTopOrBottomDialogForWorksheet", 0);
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-dropdownbutton

Get the class applied to the dropdown button in the cells and header.
ui-igspreadsheet-dropdownbutton-open

Get the class applied to the dropdown button in the cells and header when the dropdown is expanded.
ui-igspreadsheet-filter-dialog

Get the class applied to the filter dialog.
ui-igspreadsheet-filter-buttons

Get the class applied to the 'Ok' and 'Cancel' buttons.
ui-igspreadsheet-filter-dialog-column-name

Get the class applied to the name of the column being filtered.
ui-igspreadsheet-filter-dialog-condition1

Get the class applied to the first condition.
ui-igspreadsheet-filter-dialog-condition2

Get the class applied to the first condition.
ui-igspreadsheet-filter-dialog-conditional-operator

Get the class applied to the conditonal operator radio buttons.
ui-igspreadsheet-filter-dialog-hint-text

Get the class applied to the hint text.
ui-igspreadsheet-filter-dialog-show-rows-where

Get the class applied to the 'Show Rows Where:' label on the filter dialog.
ui-igspreadsheet-formatcells-dialog

Get the class applied to the FormatCells dialog.
ui-igspreadsheet-formatcells-dialog-buttons

Get the class applied to the 'Ok' and 'Cancel' buttons.
ui-igspreadsheet-formatcells-dialog-colorpickerdropdownbutton

Get the class applied to the button element used in the dropdown color picker.
ui-igspreadsheet-formatcells-dialog-numericspinner

Get the class applied to the table element that contains and arranges the content for each tab.
ui-igspreadsheet-formatcells-dialog-tab

Get the class applied to each tab.
ui-igspreadsheet-formatcells-dialog-table

Get the class applied to the table element that contains and arranges the content for each tab.
ui-igspreadsheet-formatcells-dialog-tabs

Get the class applied to the tabs.
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-sort-dialog

Get the class applied to the sort dialog.
ui-igspreadsheet-sort-dialog-add-level-button

Get the class applied to add level button of the sort dialog.
ui-igspreadsheet-sort-dialog-copy-level-button

Get the class applied to copy level button of the sort dialog.
ui-igspreadsheet-sort-dialog-delete-level-button

Get the class applied to delete level button of the sort dialog.
ui-igspreadsheet-sort-dialog-move-down-button

Get the class applied to move down button of the sort dialog.
ui-igspreadsheet-sort-dialog-move-up-button

Get the class applied to move up button of the sort dialog.
ui-igspreadsheet-sort-dialog-my-data-has-headers-checkbox

Get the class applied to options button of the sort dialog.
ui-igspreadsheet-sort-dialog-ok-cancel-buttons-area

Get the class applied to the 'Ok' and 'Cancel' buttons.
ui-igspreadsheet-sort-dialog-options-button

Get the class applied to options button of the sort dialog.
ui-igspreadsheet-sort-dialog-sort-condition-active-row

Get the class applied to the active sort conditon row.
ui-igspreadsheet-sort-dialog-sort-condition-row

Get the class applied to the a sort conditon row.
ui-igspreadsheet-sort-dialog-sort-conditions-area

Get the class applied to move down button of the sort dialog.
ui-igspreadsheet-sort-dialog-column-header

Get the class applied to the columns headers in the sort dialog.
ui-igspreadsheet-sort-dialog-top-buttons-area

Get the class applied to top group of buttons in the sort dialog.
ui-igspreadsheet-sort-options-dialog-case-sensitive-checkbox-area

Get the class applied to the 'case sensitive' checkbox of the sort options dialog.
ui-igspreadsheet-sort-options-dialog-ok-cancel-buttons-area

Get the class applied to the 'Ok' and 'Cancel' buttons.
ui-igspreadsheet-sort-optins-dialog-orienation-area

Get the class applied to the 'orientation' area of the sort options dialog.
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-igspreadsheet-tooltip-body

Get the class applied to the body/content of the spreadsheet's tooltip.
ui-igspreadsheet-tooltip-title

Get the class applied to the title of the spreadsheet's tooltip.
ui-igspreadsheet-toporbottom-dialog

Get the class applied to the filter dialog.
ui-igspreadsheet-toporbottom-buttons

Get the class applied to the 'Ok' and 'Cancel' buttons.
ui-igspreadsheet-toporbottom-dialog-input-area

Get the class applied to the input area of the TopOrBottom dialog.
ui-igspreadsheet-toporbottom-dialog-show

Get the class applied to the 'Show' label on the TopOrBottom dialog.
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 for jQuery | API Reference

ui.igSpreadsheet

Code Sample

Related Samples

Related Topics

Dependencies

Inherits