Parameters:
Name | Type | Description |
---|---|---|
options |
Object | A map of option-value pairs to set on the widget. |
- Since:
- 5.1
Example
This example creates a very simple non-editable grid with just two columns; Id and Name. Only the required options are given; all others will have their default value. The element with id myGrid is an empty div.
var fieldDefinitions = {
id: {
index: 0,
heading: "Id",
seq: "1"
},
name: {
index: 1,
heading: "Name",
seq: "2"
}
};
var data = [
["1022", "Betty"],
["1023", "James"],
...
];
apex.model.create( "myModel", {
recordIsArray: true,
fields: fieldDefinitions
}, data );
$( "#myGrid" ).grid( {
modelName: "myModel",
columns: [ fieldDefinitions ]
} );
Extends
Type:
- Object
Properties:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
* |
Object | The aggregate name. The model metadata model.RecordMetadata
agg property is the key to this aggregate map.
Properties
|
- Default Value:
- {}
Examples
Initialize the grid with the aggregateLabels option specified.
$( ".selector" ).grid( {
aggregateLabels: {
SUM: {
label: "Sum",
overallLabel: "Overall Sum" },
...
}
} );
Get or set option aggregateLabels after initialization.
// get
var value = $( ".selector" ).grid( "option", "aggregateLabels" );
// set
$( ".selector" ).grid( "option", "aggregateLabels", {...} );
Type:
- Object
Properties:
Name | Type | Description |
---|---|---|
* |
string | The property name is an aggregate name and column name separated with a "|" character. The value is the tooltip text. |
- Default Value:
- {}
Examples
Initialize the grid with the aggregateTooltips option specified.
$( ".selector" ).grid( {
aggregateTooltips: {
"AVG|SALARY": "Average Salary",
....
}
} );
Get or set option aggregateTooltips after initialization.
// get
var value = $( ".selector" ).grid( "option", "aggregateTooltips" );
// set
$( ".selector" ).grid( "option", "aggregateTooltips", {...} );
If true the selection can be copied to the clipboard using the browsers copy event. This can only be set at initialization time.
Type:
- boolean
- Default Value:
- true
Example
Initialize the grid with the allowCopy option specified.
$( ".selector" ).grid( {
allowCopy: false
} );
Only applies if grid#editable is true. If false then can't use Delete key to delete a row. This only affects the keyboard behavior. The model determines if rows can be deleted or not.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the grid with the allowDelete option specified.
$( ".selector" ).grid( {
allowDelete: false
} );
Get or set option allowDelete after initialization.
// get
var value = $( ".selector" ).grid( "option", "allowDelete" );
// set
$( ".selector" ).grid( "option", "allowDelete", false );
Only applies if grid#editable is true. If false then can't go in or out of edit mode using mouse or keyboard.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the grid with the allowEditMode option specified.
$( ".selector" ).grid( {
allowEditMode: false
} );
Get or set option allowEditMode after initialization.
// get
var value = $( ".selector" ).grid( "option", "allowEditMode" );
// set
$( ".selector" ).grid( "option", "allowEditMode", false );
Only applies if grid#editable is true. If false then can't use Insert key to add a row. This only affects the keyboard behavior. The model determines if rows can be added or not.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the grid with the allowInsert option specified.
$( ".selector" ).grid( {
allowInsert: false
} );
Get or set option allowInsert after initialization.
// get
var value = $( ".selector" ).grid( "option", "allowInsert" );
// set
$( ".selector" ).grid( "option", "allowInsert", false );
Normally hidden rows cannot be selected. This means that range selection across collapsed control breaks will not select any collapsed rows and if a control break is collapsed any selected rows within it are unselected. Setting this option to true will allow hidden rows to be selected.
Type:
- boolean
- Default Value:
- false
Examples
Initialize the grid with the allowSelectHidden option specified.
$( ".selector" ).grid( {
allowSelectHidden: true
} );
Get or set option allowSelectHidden after initialization.
// get
var value = $( ".selector" ).grid( "option", "allowSelectHidden" );
// set
$( ".selector" ).grid( "option", "allowSelectHidden", true );
Options to pass to the apex.util.applyTemplate function when processing any templates. See apex.util.applyTemplate for details on the option properties.
Type:
- object
- Inherited From:
- Default Value:
- {}
Examples
Initialize the grid with the applyTemplateOptions option specified.
$( ".selector" ).grid( {
applyTemplateOptions: {
// This example would enable you to use the placeholder #TODAY# in any templates.
placeholders: { TODAY: (new Date()).toISOString() }
}
} );
Get or set option applyTemplateOptions after initialization.
// get
var value = $( ".selector" ).grid( "option", "applyTemplateOptions" );
// set
$( ".selector" ).grid( "option", "applyTemplateOptions", {
// This example would enable you to use the placeholder #TODAY# in any templates.
placeholders: { TODAY: (new Date()).toISOString() }
} );
Specifies if a new record should be automatically added when the model doesn't contain any data. If supported by the derived view a new record may be added when moving beyond the last record in the view while editing. Must only be true if the model and view are editable and the model allows adding records.
Type:
- boolean
- Inherited From:
- Default Value:
- false
Examples
Initialize the grid with the autoAddRecord option specified.
$( ".selector" ).grid( {
autoAddRecord: true
} );
Get or set option autoAddRecord after initialization.
// get
var value = $( ".selector" ).grid( "option", "autoAddRecord" );
// set
$( ".selector" ).grid( "option", "autoAddRecord", true );
If true any control breaks can be collapsed or expanded.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the grid with the collapsibleControlBreaks option specified.
$( ".selector" ).grid( {
collapsibleControlBreaks: false
} );
Get or set option collapsibleControlBreaks after initialization.
// get
var value = $( ".selector" ).grid( "option", "collapsibleControlBreaks" );
// set
$( ".selector" ).grid( "option", "collapsibleControlBreaks", false );
Defines the grid column heading groups if any. A grid can have multiple levels of column heading groups. Group heading cells display above and span the contiguous columns or column groups that belong to the same group. The columns or column groups in a group need not be adjacent although they often are.
Type:
- object
Properties:
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
* |
object | The property name is the column group name. This name is referenced from
a grid#columns groupName property or
a column group definition parentGroupName property.
The property values are column group definitions.
Properties
|
Example
This example shows initializing the grid with "First" name and "Last" name columns that are grouped under a column heading group "Name".
$( ".selector" ).grid( {
columns[{
FIRST_NAME: {
heading: "First",
groupName: "NAME",
...
},
LAST_NAME: {
heading: "Last",
groupName: "NAME",
....
},
...
],
columnGroups: {
NAME: {
heading: "Name",
headingAlignment: "start"
},
...
}
} );
If true the mouse and keyboard can be used in column headings to adjust the sort order. The grid doesn't actually do any sorting. Something external to the grid must do the actual sorting by handling the grid#event:sortchange event and updating the model.
Note the sort order can still be adjusted external to the grid even if this is false.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the grid with the columnSort option specified.
$( ".selector" ).grid( {
columnSort: false
} );
Get or set option columnSort after initialization.
// get
var value = $( ".selector" ).grid( "option", "columnSort" );
// set
$( ".selector" ).grid( "option", "columnSort", false );
If true multiple columns can be sorted using Shift key modifier. This only applies if grid#columnSort is true.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the grid with the columnSortMultiple option specified.
$( ".selector" ).grid( {
columnSortMultiple: false
} );
Initialize the grid with the columnSortMultiple option specified in the Interactive Grid region JavaScript Initialization Code attribute.
function( options ) {
options.defaultGridViewOptions = {
columnSortMultiple: false
};
return options;
}
Get or set option columnSortMultiple after initialization.
// get
var value = $( ".selector" ).grid( "option", "columnSortMultiple" );
// set
$( ".selector" ).grid( "option", "columnSortMultiple", false );
Defines the columns in the grid. These columns are also fields in the model. The value is an array of exactly one object that maps the column name to a column definition object. The properties are the column names. The property value is a column definition. Wrapping the object in an array simply keeps the widget from making a copy of the columns so that the same definition can be shared.
The same structure can be shared with the data model and a recordView widget. This option is required.
Type:
- Array.<object>
Properties:
Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
* |
object | The property is the column name. By convention
it is the uppercase database column name. The value is an object that defines the column.
All properties are optional unless specified otherwise.
Properties
|
Example
Initialize the grid with the columns option specified.
$( ".selector" ).grid( {
columns: [ {
NAME: {
heading: "<em>Name</em>",
label: "Name",
alignment: "start",
headingAlignment: "center",
seq: 1,
canHide: true,
canSort: true,
hidden: false,
isRequired: true,
escape: true,
frozen: false,
noStretch: false,
noCopy: false,
readonly: false,
sortDirection: "asc",
sortIndex: 1,
width: 98
},
....
} ]
} );
A menu widget options object use to create the context menu.
Only specify one of contextMenu
or contextMenuId
and contextMenuAction
.
If none of contextMenu
, contextMenuId
or contextMenuAction
are specified there is no context menu.
This option cannot be set or changed after the widget is initialized.
Type:
- Object
- Default Value:
- null
Example
Initialize the grid with the contextMenu option specified.
$( ".selector" ).grid( {
contextMenu: {
items:[
{ type:"action", label: "Action 1", action: function() { alert("Action 1"); } },
{ type:"action", label: "Action 2", action: function() { alert("Action 2"); } }
]
}
} );
A callback function that is called when it is time to display a context menu.
function( event )
The function is responsible for showing the
context menu. It is given the event that caused this callback to be called.
In most cases it is simpler and more consistent to use the
contextMenu
option.
Only specify one of contextMenu
or contextMenuId
and
contextMenuAction
.
If none of contextMenu
, contextMenuId
or contextMenuAction
are specified there is no context menu.
Type:
- function
- Default Value:
- null
Example
Initialize the grid with the contextMenuAction option specified.
$( ".selector" ).grid( {
contextMenuAction: function( event ) {
// do something to display a context menu
}
} );
If option contextMenu
is given then this is the element id
to give the context menu created.
This allows other code to interact with the created context menu widget.
If option contextMenu
is not given then this is the
element id of an existing menu widget.
This option cannot be set or changed after the widget is initialized.
Type:
- string
- Default Value:
- null
Example
Initialize the grid with the contextMenuId option specified.
$( ".selector" ).grid( {
contextMenuId: "myContextMenu"
} );
Determine if the view allows editing. If true the model must also allow editing but if false the model could still allow editing. If true the view data can be edited according to what the model allows. Only applies if the view supports editing.
Type:
- boolean
- Inherited From:
- Default Value:
- false
Examples
Initialize the grid with the editable option specified.
$( ".selector" ).grid( {
editable: true
} );
Get or set option editable after initialization.
// get
var value = $( ".selector" ).grid( "option", "editable" );
// set
$( ".selector" ).grid( "option", "editable", true );
Specify if all the rows will have the same height or variable heights.
Type:
- boolean
- Inherited From:
- Default Value:
- true
Examples
Initialize the grid with the fixedRowHeight option specified.
$( ".selector" ).grid( {
fixedRowHeight: false
} );
Get or set option fixedRowHeight after initialization.
// get
var value = $( ".selector" ).grid( "option", "fixedRowHeight" );
// set
$( ".selector" ).grid( "option", "fixedRowHeight", false );
Determine if the view will include a footer to show status and pagination controls and information. If true a footer is shown at the bottom of the view. If false no footer is shown.
Type:
- boolean
- Inherited From:
- Default Value:
- true
Examples
Initialize the grid with the footer option specified.
$( ".selector" ).grid( {
footer: false
} );
Get or set option footer after initialization.
// get
var value = $( ".selector" ).grid( "option", "footer" );
// set
$( ".selector" ).grid( "option", "footer", false );
This affects scrolling and how any header (if the view has a header) or footer position is handled.
Set to true if the view is in a container that has a specific height defined. When hasSize is true the record content will scroll within the bounds of the region.
Set to false if the view does not have a defined height. The view height will be as large as needed to contain the view records as determined by pagination settings. The view may scroll within the browser window. Other options may control if the header (if the view has a header) or footer sticks to the window.
The container width must always be defined.
Type:
- boolean
- Inherited From:
- Default Value:
- false
Example
Initialize the grid with the hasSize option specified.
$( ".selector" ).grid( {
hasSize: true
} );
Determine if deleted rows (records) are removed from the view right away or shown with a visual effect
to indicate they are going to be deleted. If true (and the view is editable) deleted records will not be visible,
otherwise they are visible but have a visual indication that they are deleted. The actual records are not
deleted on the server until the model is saved. The visual effect is determined by CSS rules and is
typically strike through. See also apex.model.create onlyMarkForDelete
option.
Type:
- boolean
- Inherited From:
- Default Value:
- false
Examples
Initialize the grid with the hideDeletedRows option specified.
$( ".selector" ).grid( {
hideDeletedRows: true
} );
Get or set option hideDeletedRows after initialization.
// get
var value = $( ".selector" ).grid( "option", "hideDeletedRows" );
// set
$( ".selector" ).grid( "option", "hideDeletedRows", true );
Hide the footer if there is no data. This only applies if
footer
is true.
Type:
- boolean
- Inherited From:
- Default Value:
- false
Examples
Initialize the grid with the hideEmptyFooter option specified.
$( ".selector" ).grid( {
hideEmptyFooter: true
} );
Get or set option hideEmptyFooter after initialization.
// get
var value = $( ".selector" ).grid( "option", "hideEmptyFooter" );
// set
$( ".selector" ).grid( "option", "hideEmptyFooter", true );
Defines highlight color information for the view. Only applies to views that support highlighting. Style rules are injected into the document based on the highlight object.
The object is a mapping of highlight id to color definition.
Type:
- object
Properties:
Name | Type | Description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
* |
object | A highlight ID. A unique ID for the highlight rule. The object can contain
any number of highlight rules. The model record or field highlight
metadata (see model.RecordMetadata) is used to associate the model data with the
highlight rule. One of color or
background must be given.
Properties
|
- Inherited From:
Examples
Initialize the grid with the highlights option specified.
$( ".selector" ).grid( {
highlights: {
"hlid0001": {
seq: 1,
row: true,
color: "#FF7755"
},
...
}
} );
Get or set option highlights after initialization.
// get
var value = $( ".selector" ).grid( "option", "highlights" );
// set
$( ".selector" ).grid( "option", "highlights", {...} );
modelName :model.ModelId
Identifier of model that this view widget will display data from. Can include an instance as well.
The model must already exist. This option is required. See apex.model.create
modelId
argument.
Type:
- Inherited From:
Examples
Initialize the grid with the modelName option specified.
$( ".selector" ).grid( {
modelName: [ "myModel", "1011" ]
} );
Get or set option modelName after initialization.
// get
var value = $( ".selector" ).grid( "option", "modelName" );
// set
$( ".selector" ).grid( "option", "modelName", "myModel" );
If true multiple rows can be selected otherwise only a single row can be selected.
Type:
- boolean
- Default Value:
- false
Examples
Initialize the grid with the multiple option specified.
$( ".selector" ).grid( {
multiple: true
} );
Get or set option multiple after initialization.
// get
var value = $( ".selector" ).grid( "option", "multiple" );
// set
$( ".selector" ).grid( "option", "multiple", true );
Only applies while grid#selectCells is true. If true then a range of cells can be selected otherwise only a single cell is selected. The default is to allow a range of cells to be selected.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the grid with the multipleCells option specified.
$( ".selector" ).grid( {
multipleCells: false
} );
Get or set option multipleCells after initialization.
// get
var value = $( ".selector" ).grid( "option", "multipleCells" );
// set
$( ".selector" ).grid( "option", "multipleCells", false );
Icon to display when there is no data. The icon is displayed above the
noDataMessage
text.
Type:
- string
- Inherited From:
- Default Value:
- "icon-irr-no-results"
Examples
Initialize the grid with the noDataIcon option specified.
$( ".selector" ).grid( {
noDataIcon: "fa fa-warning"
} );
Get or set option noDataIcon after initialization.
// get
var value = $( ".selector" ).grid( "option", "noDataIcon" );
// set
$( ".selector" ).grid( "option", "noDataIcon", "fa fa-warning" );
Text to display when there is no data.
Type:
- string
- Inherited From:
- Default Value:
- ""
Examples
Initialize the grid with the noDataMessage option specified.
$( ".selector" ).grid( {
noDataMessage: "No employees found."
} );
Get or set option noDataMessage after initialization.
// get
var value = $( ".selector" ).grid( "option", "noDataMessage" );
// set
$( ".selector" ).grid( "option", "noDataMessage", "No records found." );
Pagination settings.
Type:
- object
Properties:
Name | Type | Description |
---|---|---|
scroll |
boolean | If true the scroll bar is used to page through the results a.k.a infinite scrolling or virtual paging. If false then next and previous buttons are shown. This is 'page at a time' or traditional pagination. Default is false. |
virtual |
boolean | Only applies if scroll is true.
If false new records are rendered and added to the DOM as the user scrolls to the bottom of
the view. Records are never removed from the DOM. This is 'add more' (aka high-water-mark)
scroll pagination.
If true records can be removed from the DOM as the user scrolls and the records are no longer visible.
If true and in addition loadMore is false and the model knows the
total number of records (model option hasTotalRecords is true) then
the view looks as if it contains all the records but only the records that are currently visible
are rendered. This allows virtual scroll paging in both directions. This is 'virtual' scroll
pagination (aka true virtual scrolling).
In this case, if the view supports selection the persistSelection option should be true so that
selection state isn't lost when records are removed from the DOM.
Default is false. |
loadMore |
boolean | If true show a load more button rather than auto paging.
Only applies if scroll is true. Default is false. |
showPageLinks |
boolean | If true show page links between buttons. Only applies if
scroll is false
The model must know the total number of rows for this to be true. Default is false. |
maxLinks |
number | The maximum number of links to show when
showPageLinks is true. Default is 5. |
showPageSelector |
boolean | If true show a drop down page selector between the buttons.
Only applies if scroll is false.
The model must know the total number of rows for this to be true. Default is false. |
showRange |
boolean | If true the range of rows/records is shown. It is shown between the
buttons unless showPageLinks or
showPageSelector is true. The range is shown as "X to Y" if the
model doesn't know the total rows and "X to Y of Z" if the model does know the total number of rows.
Default is true. |
firstAndLastButtons |
boolean | Only applies if scroll is false.
If true first and last buttons are included. For this to be true the model must know the total number of rows.
Default is false. |
hideSinglePage |
boolean | Only applies if scroll is false. When
true and there is just one page of results the pagination controls are hidden. When false the pagination
controls are disabled when there is just one page. The default is false. |
- Inherited From:
Examples
Initialize the grid with the pagination option specified.
$( ".selector" ).grid( {
pagination: {
showRange: true,
showPageLinks: true,
maxLinks: 6,
firstAndLastButtons: true
}
} );
Get or set option pagination after initialization.
// get
var value = $( ".selector" ).grid( "option", "pagination" );
// set
$( ".selector" ).grid( "option", "pagination", {...} );
If true and the view supports selection, the selection state for each row will be saved as record metadata in the model.
Type:
- boolean
- Inherited From:
- Default Value:
- false
Examples
Initialize the grid with the persistSelection option specified.
$( ".selector" ).grid( {
persistSelection: true
} );
Initialize the grid with the persistSelection option specified in the Interactive Grid region JavaScript Initialization Code attribute.
function( options ) {
options.defaultGridViewOptions = {
persistSelection: true
};
return options;
}
Get or set option persistSelection after initialization.
// get
var value = $( ".selector" ).grid( "option", "persistSelection" );
// set
$( ".selector" ).grid( "option", "persistSelection", true );
Options object to pass to apex.util.showSpinner. The default depends on the
hasSize
option.
Type:
- object
- Inherited From:
- Default Value:
- { fixed: !options.hasSize }
Examples
Initialize the grid with the progressOptions option specified.
$( ".selector" ).grid( {
progressOptions: null
} );
Get or set option progressOptions after initialization.
// get
var value = $( ".selector" ).grid( "option", "progressOptions" );
// set
$( ".selector" ).grid( "option", "progressOptions", null );
If true the mouse and keyboard can be used in column headings to reorder the columns or column groups.
Note the column order can still be changed external to the grid.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the grid with the reorderColumns option specified.
$( ".selector" ).grid( {
reorderColumns: false
} );
Initialize the grid with the reorderColumns option specified in the Interactive Grid region JavaScript Initialization Code attribute.
function( options ) {
options.defaultGridViewOptions = {
reorderColumns: false
};
return options;
}
Get or set option reorderColumns after initialization.
// get
var value = $( ".selector" ).grid( "option", "reorderColumns" );
// set
$( ".selector" ).grid( "option", "reorderColumns", false );
If true the mouse and keyboard can be used in column headings to adjust the width of columns.
Note the column widths can still be changed external to the grid.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the grid with the resizeColumns option specified.
$( ".selector" ).grid( {
resizeColumns: false
} );
Initialize the grid with the resizeColumns option specified in the Interactive Grid region JavaScript Initialization Code attribute.
function( options ) {
options.defaultGridViewOptions = {
resizeColumns: false
};
return options;
}
Get or set option resizeColumns after initialization.
// get
var value = $( ".selector" ).grid( "option", "resizeColumns" );
// set
$( ".selector" ).grid( "option", "resizeColumns", false );
Determines the type of row selection header. One of: "none", "plain", "sequence", or "label". The row selection header is not a real column and is always frozen.
- none: There is no selection row header.
- plain: There is a selection row header that may contain a checkbox and state classes but nothing more.
- sequence: The selection row header contains a row sequence number. The width can be adjusted.
- label: The selection row header contains a label with content given by rowHeaderLabelColumn. The width can be adjusted.
When the grid is editable or when multiple selection is allowed it is a good idea to have a rowHeader but it is not enforced. A value other than "none" is required for editable grids in order to see visual indicators such as row level errors.
Type:
- string
- Default Value:
- "none"
Examples
Initialize the grid with the rowHeader option specified.
$( ".selector" ).grid( {
rowHeader: "plain"
} );
Get or set option rowHeader after initialization.
// get
var value = $( ".selector" ).grid( "option", "rowHeader" );
// set
$( ".selector" ).grid( "option", "rowHeader", "plain" );
If true the row selection header will contain a selection control. A checkbox if multiple selection
is enabled or a radio button otherwise. If false no selection control is shown.
This option is ignored if rowHeader
is "none"
Type:
- boolean
- Default Value:
- false
Examples
Initialize the grid with the rowHeaderCheckbox option specified.
$( ".selector" ).grid( {
rowHeaderCheckbox: true
} );
Get or set option rowHeaderCheckbox after initialization.
// get
var value = $( ".selector" ).grid( "option", "rowHeaderCheckbox" );
// set
$( ".selector" ).grid( "option", "rowHeaderCheckbox", true );
This is the name of a model column to take the row header label value from.
The column value can include markup. This option only applies
if rowHeader
is "label".
Type:
- string
- Default Value:
- null
Examples
Initialize the grid with the rowHeaderLabelColumn option specified.
$( ".selector" ).grid( {
rowHeaderLabelColumn: "PART_NAME"
} );
Get or set option rowHeaderLabelColumn after initialization.
// get
var value = $( ".selector" ).grid( "option", "rowHeaderLabelColumn" );
// set
$( ".selector" ).grid( "option", "rowHeaderLabelColumn", "PART_NAME" );
Width of row selection header in pixels. Only applies if rowHeader
is not "none".
If null a default width is chosen based on the kind of rowHeader
.
Type:
- number
- Default Value:
- depends on rowHeader value
Examples
Initialize the grid with the rowHeaderWidth option specified.
$( ".selector" ).grid( {
rowHeaderWidth: 58
} );
Get or set option rowHeaderWidth after initialization.
// get
var value = $( ".selector" ).grid( "option", "rowHeaderWidth" );
// set
$( ".selector" ).grid( "option", "rowHeaderWidth", 58 );
Determine how many records to show in one page.
Only applies if pagination.scroll
is false,
otherwise this value is ignored. If null this value is determined by the viewport height.
Note the name of this option is a little confusing because some views put more than one
record on the same visual row. This value is the number of records (or items) shown on a page.
For example if rowsPerPage
is 10 and the view shows
two records per row then there will be a total of 5 rows showing 10 records.
Type:
- number
- Inherited From:
- Default Value:
- null
Examples
Initialize the grid with the rowsPerPage option specified.
$( ".selector" ).grid( {
rowsPerPage: 50
} );
Get or set option rowsPerPage after initialization.
// get
var value = $( ".selector" ).grid( "option", "rowsPerPage" );
// set
$( ".selector" ).grid( "option", "rowsPerPage", 50 );
Only applies when grid#multiple is true. If true then the current page/all visible rows can be selected with Ctrl+A and/or a select all checkbox if grid#rowHeaderCheckbox is true.
Note the definition of "all rows" is not currently well defined and may change in the future.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the grid with the selectAll option specified.
$( ".selector" ).grid( {
selectAll: false
} );
Get or set option selectAll after initialization.
// get
var value = $( ".selector" ).grid( "option", "selectAll" );
// set
$( ".selector" ).grid( "option", "selectAll", false );
When true select cells otherwise select rows. The default is to select rows.
Type:
- boolean
- Default Value:
- false
Examples
Initialize the grid with the selectCells option specified.
$( ".selector" ).grid( {
selectCells: true
} );
Get or set option selectCells after initialization.
// get
var value = $( ".selector" ).grid( "option", "selectCells" );
// set
$( ".selector" ).grid( "option", "selectCells", true );
The text message key to use for showing the number of selected rows/records in the footer. The message key must have exactly one parameter %0 which is replaced with the number of rows/records selected.
Type:
- string
- Inherited From:
- Default Value:
- "APEX.GV.SELECTION_COUNT"
Examples
Initialize the grid with the selectionStatusMessageKey option specified.
$( ".selector" ).grid( {
selectionStatusMessageKey: "MY_SELECTION_MESSAGE"
} );
Get or set option selectionStatusMessageKey after initialization.
// get
var value = $( ".selector" ).grid( "option", "selectionStatusMessageKey" );
// set
$( ".selector" ).grid( "option", "selectionStatusMessageKey", "MY_SELECTION_MESSAGE" );
Text to display when a field/column value is null or empty string.
Type:
- string
- Inherited From:
- Default Value:
- "-"
Examples
Initialize the grid with the showNullAs option specified.
$( ".selector" ).grid( {
showNullAs: "- null -"
} );
Get or set option showNullAs after initialization.
// get
var value = $( ".selector" ).grid( "option", "showNullAs" );
// set
$( ".selector" ).grid( "option", "showNullAs", "- null -" );
Determines if the user can tab to read-only cells while in edit mode.
When false
the Tab key will move focus to read-only cells.
When true
the Tab key will skip over all read-only cells.
Type:
- boolean
- Default Value:
- false
Examples
Initialize the grid with the skipReadonlyCells option specified.
$( ".selector" ).grid( {
skipReadonlyCells: true
} );
Get or set option skipReadonlyCells after initialization.
// get
var value = $( ".selector" ).grid( "option", "skipReadonlyCells" );
// set
$( ".selector" ).grid( "option", "skipReadonlyCells", true );
Determine if the footer will stick to the bottom of the page. Only applies if
hasSize
is false and
footer
is true.
If false the footer will not stick to the bottom of the page.
If true the footer will stick to the bottom of the page.
Type:
- boolean
- Inherited From:
- Default Value:
- false
Examples
Initialize the grid with the stickyFooter option specified.
$( ".selector" ).grid( {
stickyFooter: true
} );
Get or set option stickyFooter after initialization.
// get
var value = $( ".selector" ).grid( "option", "stickyFooter" );
// set
$( ".selector" ).grid( "option", "stickyFooter", true );
Determine if the header will stick to the top of the page as it scrolls.
Only applies if tableModelViewBase#hasSize is false.
If false the header will not stick to the page.
If true or a function the header will stick to the top of the page using the
undocumented stickyWidget
widget.
If the value is a function then it is passed to the
stickyWidget
as the top option.
Type:
- boolean | function
- Inherited From:
- Default Value:
- false
Examples
Initialize the grid with the stickyTop option specified.
$( ".selector" ).grid( {
stickyTop: true
} );
Get or set option stickyTop after initialization.
// get
var value = $( ".selector" ).grid( "option", "stickyTop" );
// set
$( ".selector" ).grid( "option", "stickyTop", true );
A jQuery selector that identifies cell content that can be a tab stop in navigation mode.
Type:
- string
- Default Value:
- "a,button,input"
A tooltip object suitable for jQuery UI tooltip widget except that
the items
property is not needed.
It is supplied by the grid and cannot be overridden. It matches
td,th
. Also the open
event is not available
as a property.
Default values are provided for tooltipClass
,
and show
but can be overridden.
The content
callback function receives extra arguments: model, recordMeta, colMeta, columnDef.
Tooltips are used to show errors and warnings at the row and cell level. The content function is not
called if there is an error or warning message to display. If tooltip is null the
error or warning message is added as a title attribute.
Type:
- object
Examples
Initialize the grid with the tooltip option specified.
$( ".selector" ).grid( {
tooltip: {
content: function( callback, model, recordMeta, colMeta, columnDef ) {
var text;
// calculate the tooltip text
return text;
}
}
} );
Initialize the grid with the tooltip option specified in the Interactive Grid region JavaScript Initialization Code attribute.
function( options ) {
options.defaultGridViewOptions = {
tooltip: {
content: function( callback, model, recordMeta, colMeta, columnDef ) {
var text;
// calculate the tooltip text
return text;
}
}
};
return options;
}
Get or set option tooltip after initialization.
// get
var value = $( ".selector" ).grid( "option", "tooltip" );
// set
$( ".selector" ).grid( "option", "tooltip", {
content: function( callback, model, recordMeta, colMeta, columnDef ) {
var text;
// calculate the tooltip text
return text;
}
} );
Triggered when a grid cell is activated (Enter key or double click). This event only applies to non-editable grids.
Properties:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
|||||||||
data |
Object | Additional data for the event.
Properties
|
- Since:
- 18.2
Examples
Initialize the grid with the activateCell
callback specified:
$( ".selector" ).grid({
activateCell: function( event, data ) {}
});
Bind an event listener to the gridactivatecell
event:
$( ".selector" ).on( "gridactivatecell", function( event, data ) {} );
Triggered when a column header is activated (Enter/Space key or click).
Properties:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
|||||||||
data |
Object | Additional data for the event.
Properties
|
Examples
Initialize the grid with the activateColumnHeader
callback specified:
$( ".selector" ).grid({
activateColumnHeader: function( event, data ) {}
});
Bind an event listener to the gridactivatecolumnheader
event:
$( ".selector" ).on( "gridactivatecolumnheader", function( event, data ) {} );
Triggered when whatever popup is opened in response to activateColumnHeader event should be closed/canceled. This happens because of another operation on the column such as dragging.
Properties:
Name | Type | Description |
---|---|---|
event |
Event | jQuery event object. |
Examples
Initialize the grid with the cancelColumnHeader
callback specified:
$( ".selector" ).grid({
cancelColumnHeader: function( event ) {}
});
Bind an event listener to the gridcancelcolumnheader
event:
$( ".selector" ).on( "gridcancelcolumnheader", function( event ) {} );
Triggered when the columns have been reordered.
Properties:
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
|||||||||||||||
data |
Object | Additional data for the event.
Properties
|
Examples
Initialize the grid with the columnReorder
callback specified:
$( ".selector" ).grid({
columnReorder: function( event, data ) {}
});
Bind an event listener to the gridcolumnreorder
event:
$( ".selector" ).on( "gridcolumnreorder", function( event, data ) {} );
Triggered when a column width has been changed.
Properties:
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
||||||||||||
data |
Object | Additional data for the event.
Properties
|
Examples
Initialize the grid with the columnResize
callback specified:
$( ".selector" ).grid({
columnResize: function( event, data ) {}
});
Bind an event listener to the gridcolumnresize
event:
$( ".selector" ).on( "gridcolumnresize", function( event, data ) {} );
Triggered when the edit mode changes.
Properties:
Name | Type | Description | ||||||
---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
||||||
data |
Object | Additional data for the event.
Properties
|
Examples
Initialize the grid with the modeChange
callback specified:
$( ".selector" ).grid({
modeChange: function( event, data ) {}
});
Bind an event listener to the gridmodechange
event:
$( ".selector" ).on( "gridmodechange", function( event, data ) {} );
Properties:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
|||||||||
data |
Object | Additional data for the event.
Properties
|
Examples
Initialize the grid with the pageChange
callback specified:
$( ".selector" ).grid({
pageChange: function( event, data ) {}
});
Bind an event listener to the gridpagechange
event:
$( ".selector" ).on( "gridpagechange", function( event, data ) {} );
Triggered when the selection state changes. It has no additional data.
Properties:
Name | Type | Description |
---|---|---|
event |
Event | jQuery event object. |
Examples
Initialize the grid with the selectionChange
callback specified:
$( ".selector" ).grid({
selectionChange: function( event ) {}
});
Bind an event listener to the gridselectionchange
event:
$( ".selector" ).on( "gridselectionchange", function( event ) {} );
Triggered when the sort direction changes. This does not actually sort the data or ask the model to sort or fetch new data. It is expected that a handler will call grid#refreshColumns and then take action that causes the data to be sorted.
Properties:
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
|||||||||||||||
data |
Object | Additional data for the event.
Properties
|
Examples
Initialize the grid with the sortChange
callback specified:
$( ".selector" ).grid({
sortChange: function( event, data ) {}
});
Bind an event listener to the gridsortchange
event:
$( ".selector" ).on( "gridsortchange", function( event, data ) {} );
Copies cell values from columns in the first selected row to all the other selected rows within the same
columns. If pColumns
is given only cells in the specified columns are copied down.
Only cells that can be written will be copied to. If the selection mode is row selection,
only visible columns that don't have noCopy
column property equal true are copied.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pColumns |
array |
<optional> |
An optional array of column names to copy down. The columns must be in the selection, visible, and writable. |
pCallback |
function |
<optional> |
A no argument function that is called when the copy down operation is complete. |
This method is for developer debugging only. When developing an item plug-in that is to be used in a grid cell it can be difficult to debug CSS styling because as soon as the cell looses focus the item is moved in the DOM to a hidden area. Calling this with a true argument to turn on cell edit debugging leaves the item in the cell after it looses focus so that the DOM and styles can be inspected with browser developer tools. This is not effective for end user use. Because the cell is not fully deactivated it can affect editing in general. Call it again with false to turn off cell edit debugging or refresh the page.
Parameters:
Name | Type | Description |
---|---|---|
pValue |
boolean | Set to true to debug. Keeps cells from fully deactivating when they loose focus. Set to false when done. |
Example
This example shows how to debug a column item plug-in. From the browser JavaScript console:
var view$ = ... // this is the grid widget jQuery object.
view$.grid("debugCellEdit", true)
// do your debugging
view$.grid("debugCellEdit", false)
Fills all cells in the current selection with the value pFillValue
.
If pColumns
is given only cells in the specified columns are filled.
Only cells that can be written will be filled. If the selection mode is row selection,
only visible columns that don't have noCopy
column property equal true are filled.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pFillValue |
string | object | The value to fill cells with. For columns with distinct value and display
value this can be an object with a v property for the value and a
d property for the display value. |
|
pColumns |
array |
<optional> |
An optional array of column names to fill. The columns must be in the selection, visible, and writable. |
pCallback |
function |
<optional> |
A no argument function that is called when the fill operation is complete. |
This method makes sure that the model is up to date with all current edits. While the active row is being edited it may at times be out of sync with the model.
Any code that wants to interact with the model should call this method to make sure the view and model are in sync and then interact with the model when the returned promise is resolved. You must still check for changes in the model. Just because the promise is resolved doesn't mean there where or are any changes.
Note: This does not affect any edit mode.
- Inherited From:
Returns:
- Type
- Promise
Example
The following function saves the grid view model for the Interactive Grid region
given by static id igRegion
. This shows how finishEditing
is used but it is
generally much better to use the built-in Interactive Grid "save" action.
function doSave( igRegion ) {
var p, finished,
grid = apex.region( igRegion ).call( "getViews" ).grid;
finished = grid.view$.grid( "finishEditing" );
finished.done( function() {
// now the model has all the current changes from the view
p = apex.model.save( null, null, grid.modelName, true );
p.done( function( data ) {
// do something after save completes
} );
} );
}
Display the first page of records. If option pagination.scroll
is true simply scrolls to the top of the viewport
and a new page of records is added if needed. If pagination.scroll
is false and not already on the first page the view is refreshed and shows the first page.
- Inherited From:
Returns:
- Type
- boolean
Example
This example goes to the first page.
$( ".selector" ).grid( "firstPage" );
Give focus to the grid. Focus is given to the last element that had focus.
Example
This example focuses the grid.
$( ".selector" ).grid( "focus" );
Parameters:
Name | Type | Description |
---|---|---|
pColumn |
string | Object | Column name or column definition object of the column to freeze. |
Examples
This example freezes column "NAME".
$( ".selector" ).grid( "freezeColumn", "NAME" );
This example freezes the third column. It passes in a column definition object.
var columns = $( ".selector" ).grid( "getColumns" );
$( ".selector" ).grid( "freezeColumn", columns[3] );
pItem
is not a column item or if there is no active row return null.
Parameters:
Name | Type | Description |
---|---|---|
pItem |
Element | The column item. |
Returns:
pItem
or null
if there is no active row cell for pItem
.
- Type
- jQuery | null
getActiveRecord() → {model.Record}
Returns the active record or null if there is no active record. The active record is the one currently being edited.
- Inherited From:
Returns:
- Type
- model.Record
Returns the identity of the active record or null if there is no active record. The active record is the one currently being edited.
- Inherited From:
Returns:
- Type
- string
Get the column definitions in order.
Returns:
- Type
- Array
Example
See grid#unfreezeColumn and @link grid#refreshColumns} for examples.
getModel() → {model}
Return the model currently being used by this view. The model can change over time so the returned model should not be saved and used later. If you need to store a reference to the model use apex.model.get and release it with apex.model.release.
- Inherited From:
Returns:
- Type
- model
getPageInfo() → {tableModelViewBase.pageInfo}
Return information about the current pagination state of the view.
- Inherited From:
Returns:
Given an array of jQuery row objects return the underlying data model records.
The return value from grid#getSelection is an appropriate value for pRows
.
Parameters:
Name | Type | Description |
---|---|---|
pRows |
Array.<jQuery> | Array of jQuery objects representing grid rows. |
Returns:
- Type
- Array
Returns the selected cell range or null if there are no cells selected. For this method to work the option grid#selectCells must be true. The object returned has these properties:
Properties:
Name | Type | Description |
---|---|---|
columns |
Array | An array of column names one for each selected column. The column name is null for the row header pseudo column. |
recordIds |
Array | An array of record ids one for each selected row. |
values |
Array.<Array> | An array of rows. Each row is an array of column values. |
Returns:
- Type
- Object
Example
This example logs the selected range to the console.
var i, j, text,
range = $( ".selector" ).grid( "getSelectedRange" );
text = "id"
for ( j = 0; j < range.columns.length; j++ ) {
text += ", " + range.columns[j];
}
console.log( text );
for ( i = 0; i < range.values.length; i++ ) {
text = range.recordIds[i];
for ( j = 0; j < range.values[i].length; j++ ) {
text += ", " + range.values[i][j];
}
console.log( text );
}
Return the underlying data model records corresponding to the current selection. If option grid#selectCells is true this returns an empty array.
Note: If option grid#persistSelection is true then the selected records could span multiple pages
and getSelectedRecords returns a different selection from grid#getSelection which can only return
elements from the current page. To get just the records that correspond to
getSelection
when this option is true use:
$( ".selector" ).grid( "getRecords", $( ".selector" ).grid("getSelection") );
Returns:
- Type
- Array
Example
This example gets the selected records.
var records = $( ".selector" ).grid( "getSelectedRecords" );
Return the current selection. The return value depends on the grid#selectCells option.
If selectCells
is true, return the current selected range as an
array of rows. Each row is a jQuery object containing the selected column cells.
If selectCells
is false, return the currently selected rows as an
array of jQuery objects each item in the array is a row.
Returns:
- Type
- Array
Examples
The following example processes a row selection (if selectCells
is false).
var i, rows = $( "#mygrid" ).grid( "getSelection" );
for ( i = 0; i < rows.length; i++ ) {
rows[i].addClass("foo"); // this adds a class to the tr element
rows[i].children().each(function() {
// do something with each column
}
}
The following example processes a cell range selection (if selectCells
is true).
var i, rows = $( "#mygrid" ).grid( "getSelection" );
for ( i = 0; i < rows.length; i++ ) {
// note rows[i].length is the number of columns in the range selection.
rows[i].addClass("foo"); // this adds a class to all cells in the selected columns of this row
rows[i].each(function() {
// do something with each column cell
}
}
Put focus in the cell given by pRecordId
and pColumn
. This is used to focus rows or cells that have
errors. This will scroll or change pages as needed to focus the cell. The record must be in the model.
The row containing the cell is selected. If pColumn
is null then the
first column is focused which may be the row selection header.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pRecordId |
string | The record id of the row to go to. | |
pColumn |
string |
<optional> |
The Column name in the record row to go to. |
Go to the specified page number. This should only be used when
pagination.scroll
is false and the model knows the total number of records.
Parameters:
Name | Type | Description |
---|---|---|
pPageNumber |
zero based page number |
- Inherited From:
Returns:
- Type
- boolean
Parameters:
Name | Type | Description |
---|---|---|
pColumn |
string | Object | Column name or column definition object to hide. |
Example
This example hides column "NAME".
$( ".selector" ).grid( "hideColumn", "NAME" );
Returns:
- Type
- boolean
Example
This example logs a message if the grid is in edit mode.
if ( $( ".selector" ).grid( "inEditMode" ) ) {
console.log("In edit mode");
}
Display the last page of records. If pagination.scroll
is true simply scrolls to the bottom of the viewport
and a new page of records is added if needed. If pagination.scroll
is false and not already on the last page the view is refreshed and shows the last page.
This method only works correctly if the model knows the total number of rows.
- Inherited From:
Returns:
- Type
- boolean
Example
This example goes to the last page.
$( ".selector" ).grid( "lastPage" );
Load more records into the view. If option pagination.scroll
is true this adds a new page of records to the end.
If pagination.scroll
is false this is the same as nextPage
.
This is intended to be used when pagination.loadMore
is true.
- Inherited From:
Returns:
- Type
- boolean
Call to lock the active row while async processing is in progress.
The view edits one row/record at a time. This is known as the active row. In edit mode as the user changes the focused cell with the mouse, tab or enter keys if the new cell is on a different row the previous row is deactivated and the new row is activated. Any dynamic actions or other code that manipulates Column items are acting on the active row. If any actions are asynchronous such as using Ajax to set a column item value then the row must not be deactivated while the async action is in progress otherwise the result would be applied to the wrong row!
So this method must be called before starting an async operation. It can be called multiple times if there are
multiple async operations. For each call to lockActive
there must be exactly one call to unlockActive
. See also
See tableModelViewBase#unlockActive
If the view is part of an APEX region plugin, that region should implement the
beforeAsync
and afterAsync
functions on the object returned from region#getSessionState by calling
lockActive
and unlockActive
respectively. Then if an appropriate target option is passed to apex.server.plugin then the locking will
be done automatically. Dynamic Actions that act on column items pass the correct target option.
The bottom line is that for Dynamic Actions on columns of an Interactive Grid these lock/unlock methods are
called automatically.
- Inherited From:
Example
See grid#setActiveRecordValue for an example.
Parameters:
Name | Type | Description |
---|---|---|
pColumn |
string | Object | The column name or column definition object to move. |
pNewPosition |
number | index into the array returned by grid#getColumns where the column will be moved to. |
Example
This example moves the "NAME" column to be the third column.
$( ".selector" ).grid( "moveColumn", "NAME", 2 );
Parameters:
Name | Type | Description |
---|---|---|
pLevel |
number | The level (starting with zero as the top most level) of the group. |
pOriginalPosition |
number | Original position of the column group |
pNewPosition |
number | New position of the column group |
Display the next page of records. If pagination.scroll
is true the viewport scrolls down one page and
records are added if needed. If pagination.scroll
is false and not on the last page refresh the view to show the next page.
- Inherited From:
Returns:
- Type
- boolean
Example
This example goes to the next page.
$( ".selector" ).grid( "nextPage" );
Display the previous page of records. If pagination.scroll
is true the viewport scrolls up one page and
records are added if needed. If pagination.scroll
is false and not on the first page refresh the view to show the previous page.
- Inherited From:
Returns:
- Type
- boolean
Example
This example goes to the previous page.
$( ".selector" ).grid( "previousPage" );
Refreshes the grid with data from the model. This method is rarely needed because it is called automatically when the model changes, widget options change, or when pagination or column related methods are called.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pFocus |
boolean |
<optional> |
if true put focus in the grid, if false don't. If undefined/omitted maintain focus if the grid already has focus. |
Example
This example sets the minimum width of all columns to 100 and then refreshes the columns and refresh the grid.
$( ".selector" ).grid( "getColumns" ).forEach( function( c ) { c.width = 100; } );
$( ".selector" ).grid( "refreshColumns" )
.grid( "refresh" );
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pFocus |
boolean |
<optional> |
If true the first cell of the selection is given focus. |
pNoNotify |
boolean |
<optional> |
If true the selection change event will be suppressed. |
Use after a column item value is set without triggering a change event to update the model and grid view. Has no effect if there is no active record.
When a dynamic action or other event handler on a change event updates the value of the same item that triggered the change event, the change event from setting the value should be suppressed to avoid an infinite loop. However the model is only updated from a change event. This method offers a solution to the model not being updated if the value is set asynchronously. Call this method anytime a column item is updated and the change event is suppressed.
Parameters:
Name | Type | Description |
---|---|---|
pColumn |
string | The name of the column. |
- Inherited From:
Example
This example updates the "SALARY" column, which has static id "C_SALARY", in
interactive grid with static id "MyGrid", to add 10 to whatever the user enters.
setTimeout
is used to simulate an async value update.
The active row must be locked around the async update.
var salary = apex.item( "C_SALARY" );
$( salary.node ).change( function( event ) {
// assume the current view is grid and not single row view.
var grid$ = apex.region( "MyGrid" ).call( "getCurrentView" ).view$;
grid$.grid("lockActive");
setTimeout( function() {
// suppress this change otherwise this handler will be triggered again
salary.setValue( parseFloat( salary.getValue() ) + 10, null, true );
// suppressing the value means the grid model is not updated so call setActiveRecordValue
grid$.grid( "setActiveRecordValue", "SALARY" )
.grid( "unlockActive" );
}, 10 ):
} );
Parameters:
Name | Type | Description |
---|---|---|
pColumn |
string | Object | The column name or column definition object to set the width on. |
pWidth |
number | The width in pixels to set the column too. |
Parameters:
Name | Type | Description |
---|---|---|
pEditMode |
boolean | If true enter edit mode. If false enter navigation mode. |
Example
This example enters edit mode.
$( ".selector" ).grid( "setEditMode", true ) );
pNoNotify
is true.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pRecords |
Array.<model.Record> | An array of data model records to select. | |
pFocus |
boolean |
<optional> |
If true the first cell of the selection is given focus. |
pNoNotify |
boolean |
<optional> |
If true the selection change event will be suppressed. |
Returns:
- Type
- number
pNoNotify
is true.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pRows |
Array | An array of jQuery row objects such as the return value of grid#getSelection
or a jQuery object containing one or more rows (tr elements)
or columns (td elements) from this grid. |
|
pFocus |
boolean |
<optional> |
If true the first cell (in pRows) of the selection is given focus. |
pNoNotify |
boolean |
<optional> |
if true the selection change event will be suppressed. |
Example
This example selects the third row of the first grid widget on the page.
$(".a-GV").first().grid( "setSelection", [$(".a-GV").first().find( ".a-GV-w-scroll .a-GV-row" ).eq(3)] );
Parameters:
Name | Type | Description |
---|---|---|
pColumn |
string | Object | Column name or column definition object to show. |
Example
This example shows column "NAME".
$( ".selector" ).grid( "showColumn", "NAME" );
Parameters:
Name | Type | Description |
---|---|---|
pColumn |
string | Object | column name or column definition object of the column to unfreeze. |
Example
This example unfreezes column "NAME".
$( ".selector" ).grid( "unfreezeColumn", "NAME" );
Call to unlock the active row after async processing is complete.
Call after the async operation completes. See tableModelViewBase#lockActive for more information.
- Inherited From:
Example
See grid#setActiveRecordValue for an example.