Parameters:
Name | Type | Description |
---|---|---|
options |
Object | A map of option-value pairs to set on the widget. |
- Since:
- 5.1
Example
Create a tableModelView for name value paris displayed in a simple table.
var fields = {
PARTNO: {
index: 0
},
PART_DESC: {
index: 1
}
},
data = [
["B-10091", "Spark plug"],
["A-12872", "Radiator hose"],
...
];
apex.model.create("parts", {
shape: "table",
recordIsArray: true,
fields: fields,
paginationType: "progressive"
}, data, data.length );
$("#partsView").tableModelView( {
modelName: "parts",
beforeTemplate: '<table class="u-Report"><thead><tr><th>Part No</th><th>Description</th></tr></thead><tbody>',
afterTemplate: '</tbody></table>',
recordTemplate: '<tr><td>&PARTNO.</td><td>&PART_DESC.</td></tr>',
pagination: {
scroll: true
}
} );
Extends
Markup to render after the record data.
The markup must include an element that closes the opening element from the
beforeTemplate
option.
For example </ul>
.
Type:
- string
- Default Value:
- "</ul>"
Examples
Initialize the tableModelView with the afterTemplate option specified.
$( ".selector" ).tableModelView( {
afterTemplate: "</ol>"
} );
Get or set option afterTemplate after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "afterTemplate" );
// set
$( ".selector" ).tableModelView( "option", "afterTemplate", "</ol>" );
Markup to render for an aggregate record. This should only be set if the model data contains aggregate records. In addition you use the following special substitution symbols:
- APEX$ROW_ID - The record id from the model as if from model#recordId.
- APEX$ROW_INDEX - The record index
- APEX$AGG - The name of the aggregate function. One of: "COUNT", "COUNT_DISTINCT", "SUM", "AVG", "MIN" ,"MAX", "MEDIAN"
- APEX$AGG_TOTAL - This is true when the aggregate record is a grand total and false otherwise.
Type:
- string
- Default Value:
- ""
Examples
Initialize the tableModelView with the aggregateTemplate option specified.
$( ".selector" ).tableModelView( {
aggregateTemplate: "<li>{case APEX$AGG/}{when SUM/}Total:</b> &SALARY.{endcase/}</li>"
} );
Get or set option aggregateTemplate after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "aggregateTemplate" );
// set
$( ".selector" ).tableModelView( "option", "aggregateTemplate", "<li>{case APEX$AGG/}{when SUM/}Total:</b> &SALARY.{endcase/}</li>" );
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 tableModelView with the applyTemplateOptions option specified.
$( ".selector" ).tableModelView( {
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" ).tableModelView( "option", "applyTemplateOptions" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the autoAddRecord option specified.
$( ".selector" ).tableModelView( {
autoAddRecord: true
} );
Get or set option autoAddRecord after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "autoAddRecord" );
// set
$( ".selector" ).tableModelView( "option", "autoAddRecord", true );
Markup to render before the record data.
The markup must include an opening element that will contain all the records.
For example <ul>
.
Type:
- string
- Default Value:
- "<ul>"
Examples
Initialize the tableModelView with the beforeTemplate option specified.
$( ".selector" ).tableModelView( {
beforeTemplate: "<ol>"
} );
Get or set option beforeTemplate after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "beforeTemplate" );
// set
$( ".selector" ).tableModelView( "option", "beforeTemplate", "<ol>" );
Extra CSS classes to add to the element that is the parent of the collection of records.
Type:
- string
- Default Value:
- "a-TMV-defaultIconView" if tableModelView#recordTemplate is null and null otherwise.
Examples
Initialize the tableModelView with the collectionClasses option specified.
$( ".selector" ).tableModelView( {
collectionClasses: "EmployeeList"
} );
Get or set option collectionClasses after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "collectionClasses" );
// set
$( ".selector" ).tableModelView( "option", "collectionClasses", "EmployeeList" );
Normally keydown handling will call preventDefault so that arrow key navigation has no effect outside this control. This prevents text selection and keeps parents from scrolling. By setting this to false it would allow a nested container to respond to arrow navigation keys. Note this only applies when useIconList is true since it is the only case where arrow keys are used for navigation of the list.
Type:
- boolean
- Default Value:
- true
Markup to render for a control break. This should only be set if the model data has control breaks. In addition you can use the following special substitution symbol:
- APEX$ROW_INDEX - The record index
Type:
- string
- Default Value:
- ""
Examples
Initialize the tableModelView with the controlBreakTemplate option specified.
$( ".selector" ).tableModelView( {
controlBreakTemplate: "<li><h4>&CATEGORY%heading. &CATEGORY.</h4></li>"
} );
Get or set option controlBreakTemplate after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "controlBreakTemplate" );
// set
$( ".selector" ).tableModelView( "option", "controlBreakTemplate", "<li><h4>&CATEGORY%heading. &CATEGORY.</h4></li>" );
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 tableModelView with the editable option specified.
$( ".selector" ).tableModelView( {
editable: true
} );
Get or set option editable after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "editable" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the fixedRowHeight option specified.
$( ".selector" ).tableModelView( {
fixedRowHeight: false
} );
Get or set option fixedRowHeight after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "fixedRowHeight" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the footer option specified.
$( ".selector" ).tableModelView( {
footer: false
} );
Get or set option footer after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "footer" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the hasSize option specified.
$( ".selector" ).tableModelView( {
hasSize: true
} );
Optional markup for a header to render before the report. The header does not scroll
with the report and depending on stickyTop
option may stick to the
top of the page. See also option tableModelView#syncHeaderHScroll.
Type:
- string
- Default Value:
- ""
Examples
Initialize the tableModelView with the headerTemplate option specified.
$( ".selector" ).tableModelView( {
headerTemplate: "<h4>My Report</h4>"
} );
Get or set option headerTemplate after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "headerTemplate" );
// set
$( ".selector" ).tableModelView( "option", "headerTemplate", "<h4>My Report</h4>" );
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 tableModelView with the hideDeletedRows option specified.
$( ".selector" ).tableModelView( {
hideDeletedRows: true
} );
Get or set option hideDeletedRows after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "hideDeletedRows" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the hideEmptyFooter option specified.
$( ".selector" ).tableModelView( {
hideEmptyFooter: true
} );
Get or set option hideEmptyFooter after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "hideEmptyFooter" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the highlights option specified.
$( ".selector" ).tableModelView( {
highlights: {
"hlid0001": {
seq: 1,
row: true,
color: "#FF7755"
},
...
}
} );
Get or set option highlights after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "highlights" );
// set
$( ".selector" ).tableModelView( "option", "highlights", {...} );
The CSS class column to use for the icon. At most one of iconClassColumn
and imageURLColumn
should be given.
Type:
- string
- Default Value:
- null
Examples
Initialize the tableModelView with the iconClassColumn option specified.
$( ".selector" ).tableModelView( {
iconClassColumn: "PERSON_AVATAR"
} );
Get or set option iconClassColumn after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "iconClassColumn" );
// set
$( ".selector" ).tableModelView( "option", "iconClassColumn", "PERSON_AVATAR" );
Additional options to pass to the iconList widget. See iconList for information about the options it supports. Only applies if tableModelView#useIconList option is true.
Type:
- object
- Default Value:
- {}
Attributes for the <img>
element.
Only used if tableModelView#imageURLColumn is specified.
Type:
- string
- Default Value:
- null
The URL column of image to use for the icon. At most one of iconClassColumn
and imageURLColumn
should be given.
Type:
- string
- Default Value:
- null
Examples
Initialize the tableModelView with the imageURLColumn option specified.
$( ".selector" ).tableModelView( {
imageURLColumn: "PROD_IMAGE_URL"
} );
Get or set option imageURLColumn after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "imageURLColumn" );
// set
$( ".selector" ).tableModelView( "option", "imageURLColumn", "PROD_IMAGE_URL" );
Name of the column that contains the label text.
At a minimum one of tableModelView#labelColumn or tableModelView#recordTemplate is required.
Type:
- string
- Default Value:
- null
Examples
Initialize the tableModelView with the labelColumn option specified.
$( ".selector" ).tableModelView( {
labelColumn: "EMP_NAME"
} );
Get or set option labelColumn after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "labelColumn" );
// set
$( ".selector" ).tableModelView( "option", "labelColumn", "EMP_NAME" );
Additional anchor attributes. Ignored unless a link is present.
Type:
- string
- Default Value:
- null
Examples
Initialize the tableModelView with the linkAttributes option specified.
$( ".selector" ).tableModelView( {
linkAttributes: "target='_blank'"
} );
Get or set option linkAttributes after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "linkAttributes" );
// set
$( ".selector" ).tableModelView( "option", "linkAttributes", "target='_blank'" );
If true the record metadata should contain a url
property that contains the link target.
Type:
- boolean
- Default Value:
- false
Examples
Initialize the tableModelView with the linkTarget option specified.
$( ".selector" ).tableModelView( {
linkTarget: true
} );
Get or set option linkTarget after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "linkTarget" );
// set
$( ".selector" ).tableModelView( "option", "linkTarget", true );
The name of the column that contains the anchor href
.
If not given the href
comes from the record field metadata
url
property. If there is no url
property then this item has no link.
Type:
- string
- Default Value:
- null
Examples
Initialize the tableModelView with the linkTargetColumn option specified.
$( ".selector" ).tableModelView( {
linkTargetColumn: "PROD_TARGET"
} );
Get or set option linkTargetColumn after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "linkTargetColumn" );
// set
$( ".selector" ).tableModelView( "option", "linkTargetColumn", "PROD_TARGET" );
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 tableModelView with the modelName option specified.
$( ".selector" ).tableModelView( {
modelName: [ "myModel", "1011" ]
} );
Get or set option modelName after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "modelName" );
// set
$( ".selector" ).tableModelView( "option", "modelName", "myModel" );
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 tableModelView with the noDataIcon option specified.
$( ".selector" ).tableModelView( {
noDataIcon: "fa fa-warning"
} );
Get or set option noDataIcon after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "noDataIcon" );
// set
$( ".selector" ).tableModelView( "option", "noDataIcon", "fa fa-warning" );
Text to display when there is no data.
Type:
- string
- Inherited From:
- Default Value:
- ""
Examples
Initialize the tableModelView with the noDataMessage option specified.
$( ".selector" ).tableModelView( {
noDataMessage: "No employees found."
} );
Get or set option noDataMessage after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "noDataMessage" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the pagination option specified.
$( ".selector" ).tableModelView( {
pagination: {
showRange: true,
showPageLinks: true,
maxLinks: 6,
firstAndLastButtons: true
}
} );
Get or set option pagination after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "pagination" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the persistSelection option specified.
$( ".selector" ).tableModelView( {
persistSelection: true
} );
Initialize the tableModelView 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" ).tableModelView( "option", "persistSelection" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the progressOptions option specified.
$( ".selector" ).tableModelView( {
progressOptions: null
} );
Get or set option progressOptions after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "progressOptions" );
// set
$( ".selector" ).tableModelView( "option", "progressOptions", null );
Markup to render for each record. Can use substitution tokens from the model using column names. In addition you can use the following special substitution symbols:
- APEX$ROW_ID - The record id
- APEX$ROW_INDEX - The record index
- APEX$ROW_URL - The record url if any
- APEX$ROW_STATE_CLASSES - Various record states such as "is-inserted" or "is-deleted"
- APEX$VALIDATION_MESSAGE - If the record is in a validation error or warning state this is the associated message
At a minimum one of tableModelView#labelColumn or tableModelView#recordTemplate is required.
Type:
- string
- Default Value:
- Markup depends on several other options.
Examples
Initialize the tableModelView with the recordTemplate option specified.
$( ".selector" ).tableModelView( {
recordTemplate: "<li>&NAME. - &SALARY.</li>"
} );
Get or set option recordTemplate after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "recordTemplate" );
// set
$( ".selector" ).tableModelView( "option", "recordTemplate", "<li>&NAME. - &SALARY.</li>" );
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 tableModelView with the rowsPerPage option specified.
$( ".selector" ).tableModelView( {
rowsPerPage: 50
} );
Get or set option rowsPerPage after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "rowsPerPage" );
// set
$( ".selector" ).tableModelView( "option", "rowsPerPage", 50 );
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 tableModelView with the selectionStatusMessageKey option specified.
$( ".selector" ).tableModelView( {
selectionStatusMessageKey: "MY_SELECTION_MESSAGE"
} );
Get or set option selectionStatusMessageKey after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "selectionStatusMessageKey" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the showNullAs option specified.
$( ".selector" ).tableModelView( {
showNullAs: "- null -"
} );
Get or set option showNullAs after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "showNullAs" );
// set
$( ".selector" ).tableModelView( "option", "showNullAs", "- null -" );
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 tableModelView with the stickyFooter option specified.
$( ".selector" ).tableModelView( {
stickyFooter: true
} );
Get or set option stickyFooter after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "stickyFooter" );
// set
$( ".selector" ).tableModelView( "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 tableModelView with the stickyTop option specified.
$( ".selector" ).tableModelView( {
stickyTop: true
} );
Get or set option stickyTop after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "stickyTop" );
// set
$( ".selector" ).tableModelView( "option", "stickyTop", true );
If there is a tableModelView#headerTemplate and this is true the horizontal scroll offset will be synchronized between the header and the view body. This is useful in cases such as a table where the header columns need to align with the body columns.
Type:
- boolean
- Default Value:
- false
Examples
Initialize the tableModelView with the syncHeaderHScroll option specified.
$( ".selector" ).tableModelView( {
syncHeaderHScroll: true
} );
Get or set option syncHeaderHScroll after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "syncHeaderHScroll" );
// set
$( ".selector" ).tableModelView( "option", "syncHeaderHScroll", true );
If true use the iconList widget to display the records.
Type:
- boolean
- Default Value:
- false
Examples
Initialize the tableModelView with the useIconList option specified.
$( ".selector" ).tableModelView( {
useIconList: true
} );
Get or set option useIconList after initialization.
// get
var value = $( ".selector" ).tableModelView( "option", "useIconList" );
// set
$( ".selector" ).tableModelView( "option", "useIconList", true );
Properties:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
|||||||||
data |
Object | Additional data for the event.
Properties
|
Examples
Initialize the tableModelView with the pageChange
callback specified:
$( ".selector" ).tableModelView({
pageChange: function( event, data ) {}
});
Bind an event listener to the tablemodelviewpagechange
event:
$( ".selector" ).on( "tablemodelviewpagechange", function( event, data ) {} );
Properties:
Name | Type | Description |
---|---|---|
event |
Event | jQuery event object. |
Examples
Initialize the tableModelView with the selectionChange
callback specified:
$( ".selector" ).tableModelView({
selectionChange: function( event ) {}
});
Bind an event listener to the tablemodelviewselectionchange
event:
$( ".selector" ).on( "tablemodelviewselectionchange", function( event ) {} );
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 tableModelView. Only applies if the view supports selection or focus. This is the case when tableModelView#useIconList is true. Focus is given to the last item that had focus.
Example
This example focuses the view.
$( ".selector" ).tableModelView( "focus" );
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
Return the iconList instance if option tableModelView#useIconList is true, and null otherwise.
Note: This returns the instance and not the jQuery object.
Returns:
- Type
- object
Example
This example gets the iconList and calls the getColumns method.
$(".selector").tableModelView("getIconList").getColumns();
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:
getRecords(pElements$) → {Array.<model.Record>}
Given a jQuery object with one or more record elements return the corresponding model records. For this to work the elements must have a data-id attribute with the value of the record id.
Parameters:
Name | Type | Description |
---|---|---|
pElements$ |
jQuery | A jQuery object of record elements such as returned by getSelection. |
Returns:
- Type
- Array.<model.Record>
getSelectedRecords() → {Array.<model.Record>}
Return the underlying data model records corresponding to the current selection.
This is only applicable if the tableModelView#useIconList option is true. If it is false then null is returned.
Returns:
- Type
- Array.<model.Record>
Return the currently selected elements.
This is only applicable if the tableModelView#useIconList option is true.
Returns:
- Type
- jQuery
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
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.
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" );
Refresh the view. Typically no need to call this method because it is called automatically when the model data is refreshed.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pFocus |
boolean |
<optional> |
if true put focus in the view, if false don't. If undefined/omitted maintain focus if the view already has focus. |
This method must be called if the size of the container changes so that pagination state, footer position, and nested iconList if any can be updated to reflect the new size.
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 ):
} );
Select the elements that correspond to the given data model records.
This is only applicable if the tableModelView#useIconList option is true.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pRecords |
Array.<model.Record> | Array of data model records to select. | |
pFocus |
boolean |
<optional> |
If true the first record of the selection is given focus. |
pNoNotify |
boolean |
<optional> |
If true the selection change event will be suppressed. |
Set the selected record elements.
This is only applicable if the iconList#useIconList option is true.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pElements$ |
jQuery | A jQuery object with record elements such as the return value of getSelection. | |
pFocus |
boolean |
<optional> |
If true the first element of the selection is given focus. |
pNoNotify |
boolean |
<optional> |
If true the selection change event will be suppressed. |
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.