ui.igSpreadsheet

ui.igSpreadsheet_image

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

jquery.js
jquery-ui.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js
infragistics.ui.combo.js
infragistics.ui.dialog.js
infragistics.ui.editors.js
infragistics.ui.popover.js
infragistics.ui.colorpicker.js
infragistics.dv_jquerydom.js
infragistics.ext_core.js
infragistics.ext_collections.js
infragistics.ext_collectionsextended.js
infragistics.ext_io.js
infragistics.ext_text.js
infragistics.ext_web.js
infragistics.xml.js
infragistics.dv_interactivity.js
infragistics.dv_core.js
infragistics.documents.core_core.js
infragistics.excel_core.js
infragistics.ext_ui.js
infragistics.undo.js
infragistics.spreadsheet.js

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.

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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • action
          Type: String

          Gets the action that was executed.

    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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • action
          Type: String

          Gets the action that is about to be executed.

    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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • oldValue
          Type: String

          Gets the previous active cell.

        • newValue
          Type: String

          Gets the current active cell.

    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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • oldActivePane
          Type: Object

          Gets the previous active pane.

        • newActivePane
          Type: Object

          Gets the current active pane.

        • activeCell
          Type: String

          Gets the active cell of the new active pane or null if there is no active pane.

        • visibleRange
          Type: String

          Gets the current visible range of the new active pane or null if there is no active pane.

    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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • oldActiveTable
          Type: Object

          Gets the previous active Table.

        • newActiveTable
          Type: Object

          Gets the current active Table.

    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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • oldActiveWorksheet
          Type: Object

          Gets the previous active worksheet.

        • oldActiveWorksheetName
          Type: String

          Gets the name of the previous active worksheet or null if oldActiveWorksheet is null.

        • newActiveWorksheet
          Type: Object

          Gets the current active worksheet.

        • newActiveWorksheetName
          Type: 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) {...}
		});

  • editModeEntered

    Cancellable:
    false

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

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • cell
          Type: String

          Gets the cell for which the control has entered edit mode.

    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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • cell
          Type: String

          Gets the cell for which the control is going into edit mode.

    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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • cell
          Type: String

          Gets the cell for which the control has exited edit mode.

    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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • acceptChanges
          Type: Bool

          Get or set a boolean indicating whether the changes will be made to the cell's value when edit mode ends.

        • canCancel
          Type: Bool

          Get a boolean indicating if the edit mode is being forced to exit edit mode in which case it cannot be cancelled.

        • cell
          Type: String

          Gets the cell for which the control is exiting edit mode.

        • editText
          Type: 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.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • action
          Type: String

          Get or set the action to take in response to the failed validation.

        • canStayInEditMode
          Type: Bool

          Get a boolean indicating whether the cell is allowed to stay in edit mode.

        • cell
          Type: String

          Gets the cell for which the control is in edit mode.

        • validationRule
          Type: String

          Get the rule which failed validation.

    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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • ranges
          Type: Array

          Get an array of protected range objects that should be unlocked.

        • unprotect
          Type: 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.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • hyperlink
          Type: Object

          Get the hyperlink to be executed.

    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

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • pane
          Type: Object

          Get the pane for which the selection has 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.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

        • canCancel
          Type: Bool

          Get a boolean indicating if the operation that triggered the prompt can be cancelled.

        • displayMessage
          Type: Bool

          Get a boolean indicating if a message will be displayed to the end user.

        • exception
          Type: Object

          Gets the exception for the error, if there was one.

        • message
          Type: String

          Get or set the message that will be displayed.

        • trigger
          Type: String

          Get the action that caused the prompt to 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).

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the spreadsheet widget.

    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.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.