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
Related Topics
Dependencies
Inherits
-
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.
-
actionExecuted
- Cancellable:
- false
Invoked when an action is executed on the
Spreadsheet.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.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.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.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.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.-
evtType: Event
JQuery event object.
-
uiType: Object
-
ownerType: Object
Gets a reference to the spreadsheet widget.
-
oldActiveWorksheetNameType: String
Gets the name of the previous active worksheet or null if oldActiveWorksheet is null.
-
newActiveWorksheetNameType: String
Gets the name of the new active worksheet or null if newActiveWorksheet is null.
-
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.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.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.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.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.-
evtType: Event
JQuery event object.
-
uiType: Object
-
ownerType: Object
Gets a reference to the spreadsheet widget.
-
acceptChangesType: Bool
Get or set a boolean indicating whether the changes will be made to the cell's value when edit mode ends.
-
canCancelType: Bool
Get a boolean indicating if the edit mode is being forced to exit edit mode in which case it cannot be cancelled.
-
cellType: String
Gets the cell for which the control is exiting edit mode.
-
editTextType: String
Gets the edit text that will be used to update the cell(s).
-
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.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.-
evtType: Event
JQuery event object.
-
uiType: Object
-
ownerType: Object
Gets a reference to the spreadsheet widget.
-
rangesType: Array
Get an array of protected range objects that should be unlocked.
-
unprotectType: Object
Get a parameterless function that may be invoked to unlock the associated ranges.
-
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.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.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.
-
evtType: Event
JQuery event object.
-
uiType: Object
-
ownerType: Object
Gets a reference to the spreadsheet widget.
-
canCancelType: Bool
Get a boolean indicating if the operation that triggered the prompt can be cancelled.
-
displayMessageType: Bool
Get a boolean indicating if a message will be displayed to the end user.
-
exceptionType: Object
Gets the exception for the error, if there was one.
-
messageType: String
Get or set the message that will be displayed.
-
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).Code Sample
//Delegate $(document).delegate(".selector", "igspreadsheetworkbookdirtied", function (evt, ui) { ... }); //Initialize $(".selector").igSpreadsheet({ workbookDirtied: function(evt, ui) {...} });
-
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.