Flexberry Documentation
FlexberryGroupeditComponent Class
addon/components/flexberry-groupedit.js:18
Component for create, edit and delete detail objects.
Item Index
Methods
Properties
- _groupEditEventsService
- action
- allowColumnResize
- appConfig
- appConfigSettings
- appConfigSettingsPath
- buttonClass
- cellComponent
- columnsWidthAutoresize
- componentName
- content
- createNewButton
- currentController
- customButtons
- customTableClass
- defaultSettingsButton
- defaultSortingButton
- deleteButton
- dynamicProperties
- editFormRoute
- editOnSeparateRoute
- fixedHeader
- mainModelProjection
- menuInRowAdditionalItems
- minAutoColumnWidth
- modelProjection
- orderable
- orderedProperty
- overflowedComponents
- placeholder
- readonly
- readonlyAttr
- relatedModel
- required
- rowClickable
- saveBeforeRouteLeave
- searchForContentChange
- showAsteriskInRow
- showCheckBoxInRow
- showDeleteButtonInRow
- showDeleteMenuItemInRow
- showEditMenuItemInRow
- showValidationMessages
- sorting
- store
- tableStriped
- useSidePageMode
Methods
actions.addColumnToSorting
-
column
Handles action from object-list-view when no handler for this component is defined.
Parameters:
-
columnObjectColumn to add sorting by.
actions.customButtonAction
-
actionName
Handler to get user button's actions and send action to corresponding controllers's handler.
Parameters:
-
actionNameStringThe name of action
actions.customButtonInRowAction
-
actionName -
model
Handler to get user button's in rows actions and send action to corresponding controllers's handler.
actions.groupEditRowClick
-
record -
options
Handles click on row of component. Sends primary action out of component.
actions.sendMenuItemAction
-
actionName -
record
Send action with actionName into controller.
actions.sortByColumn
-
column
Handles action from object-list-view when no handler for this component is defined.
Parameters:
-
columnObjectColumn to sort by.
beforeDeleteRecord
-
record -
data
Hook that executes before deleting the record.
Parameters:
Example:
<!-- app/templates/employees.hbs -->
{{flexberry-groupedit
...
beforeDeleteRecord=(action 'beforeDeleteRecord')
...
}}
// app/controllers/employees.js
import ListFormController from './list-form';
export default ListFormController.extend({
actions: {
beforeDeleteRecord(record, data) {
if (record.get('myProperty')) {
data.cancel = true;
}
}
}
});
confirmDeleteRow
-
record
Hook that can be used to confirm delete row.
Parameters:
-
recordDS.ModelThe record to be deleted.
Returns:
Example:
// app/controllers/example.js
...
actions: {
...
confirmDeleteRow(record) {
return new Promise((resolve, reject) => {
this.showConfirmDialg({
title: Delete an object with the ID '${record.get('id')}'?,
onApprove: resolve,
onDeny: reject,
});
});
}
...
}
...
<!-- app/templates/example.hbs -->
{{flexberry-objectlistview
...
confirmDeleteRow=(action "confirmDeleteRow")
...
}}
confirmDeleteRows
()
Boolean | Promise
Hook that can be used to confirm delete rows.
Returns:
Example:
// app/controllers/example.js
...
actions: {
...
confirmDeleteRows() {
return new Promise((resolve, reject) => {
this.showConfirmDialg({
title: 'Delete all selected records?',
onApprove: resolve,
onDeny: reject,
});
});
}
...
}
...
<!-- app/templates/example.hbs -->
{{flexberry-objectlistview
...
confirmDeleteRows=(action "confirmDeleteRows")
...
}}
getTargetObjectByCondition.
-
condition
Returns that 'targetObject' (from 'targetObject's hierarchy) which satisfies a given condition.
let controller = this.getTargetObjectByCondition((targetObject) => {
return targetObject instanceof Controller;
});
Parameters:
-
conditionFunctionCallback-function, which will be called for each 'targetObject' in 'targetObject's hierarchy, until callback return true for one of them.
Returns:
Target object which satisfies a given condition or null.
initProperty
-
options
Initializes component's property with recpect to following priority: 1 - template-defined parameters, 2 - applicaion configuration-defined parameters (JSON from ./config/environment by path defined in 'appConfigSettingsPath' property), 3 - component-defined defaults. Note! It is important to be declared as undefined for those component properties, which will be initialized through 'initProperty' call.
// ./config/environment.js.
module.exports = function(environment) {
var ENV = {
APP: {
components: {
myComponent: {
myComponentProperty: 'myComponentProperty config-defined default value',
}
}
}
};
return ENV;
};
// /components/my-component.js
import FlexberryBaseComponent from 'ember-flexberry/flexberry-base-component';
export default FlexberryBaseComponent.extend({
appConfigSettingsPath: 'APP.components.myComponent',
myComponentProperty: undefined,
init() {
this._super.apply(this, arguments);
this.initProperty({ propertyName: 'myComponentProperty', defaultValue: 'myComponentProperty default value' });
}
});
sortingFunction
()
Sorting records and trigger geSortApply action.
Properties
action
String
Name of action to handle row click. Action will be send out of the component.
Default: 'groupEditRowClick'
allowColumnResize
Boolean
Flag: indicates whether allow to resize columns (if true) or not (if false).
If UserSettingsService is enabled then saved widths of columns are displayed on component.
Default: true
appConfigSettings
Object
Component settings object from application configuration (part of JSON from ./config/environment.js). Part of appConfig related to appConfigSettingsPath.
Default: null
appConfigSettingsPath
String
Path to component's settings in application configuration (JSON from ./config/environment.js).
Default: 'APP.components.flexberryGroupedit'
cellComponent
Object
Default cell component that will be used to display values in columns cells.
Sub-properties:
columnsWidthAutoresize
Boolean
Indicates whether or not autoresize columns for fit the page width.
Default: true
currentController
Controller
Current controller.
Default: null
customButtons
Array
Array of custom buttons of special structures [{ buttonName: ..., buttonAction: ..., buttonClasses: ... }, {...}, ...].
Example:
{
buttonName: '...', // Button displayed name.
buttonAction: '...', // Action that is called from controller on this button click (it has to be registered at component).
buttonClasses: '...', // Css classes for button.
buttonTitle: '...', // Button title.
iconClasses: '' // Css classes for icon.
disabled: true, // The state of the button is disabled if true or enabled if false.
}
defaultSettingsButton
Boolean
Flag: indicates whether to show default settings button at toolbar.
Default: true
defaultSortingButton
Boolean
Flag indicates whether to show button fo default sorting set.
Default: true
dynamicProperties
Object
Component dynamic properties ({ componentPropertyName: value }). Used when component renders dynamically with ember {{component}} helper: {{component 'my-component' value=value dynamicProperties=myConponentProperties}}. In the end of component initialization its properties values will be replaced with values from this object.
Default: null
editFormRoute
String
Route of edit form.
Example:
This form is opened after row click if flag editOnSeparateRoute is enabled.
editOnSeparateRoute
Boolean
Flag: indicates whether records should be edited on separate route.
Default: false
Example:
In order to enable properly editing in separate route following properties have to be defined:
- editOnSeparateRoute has to be set as true,
- rowClickable has to be set as true,
- editFormRoute has to be set,
- saveBeforeRouteLeave can be set.
{ {flexberry-groupedit
...
editOnSeparateRoute=true
rowClickable=true
rowClick='rowClick'
editFormRoute=commentsEditRoute
saveBeforeRouteLeave=needSaveBeforeRouteLeave
...
} }
fixedHeader
Boolean
Flag indicates whether to fix the table head (if true) or not (if false).
Default: true
mainModelProjection
Object
Main model projection. Accepts object projections. Needs for support locales of captions.
minAutoColumnWidth
Number
Minimum column width, if width isn't defined in userSettings.
Default: 100
modelProjection
Object
Model projection which should be used to display given content. Properties of objects by model projection are displayed on component.
Default: null
orderable
Boolean
Flag indicates whether ordering by clicking on column headers is allowed.
Default: false
Example:
If sorting is used then there has to be declaration:
{{flexberry-groupedit
...
orderable=true
sorting=computedSorting
sortByColumn=(action "sortByColumn")
addColumnToSorting=(action "addColumnToSorting")}}
orderedProperty
Computed
Check in view order property.
overflowedComponents
Array
List of component names, which can overflow table cell.
Default: A(['flexberry-dropdown', 'flexberry-lookup'])
placeholder
String
Text to be displayed in table body, if content is not defined or empty.
Default: t('components.flexberry-groupedit.placeholder')
readonlyAttr
String | Undefined
Readonly HTML attribute following to the readonly query param. According to the W3C standard, returns 'readonly' if readonly is true and undefined otherwise.
rowClickable
Boolean
Flag indicates whether table rows are clickable (action will be fired after row click).
Default: false
saveBeforeRouteLeave
Boolean
Flag indicates whether to save current model before going to the detail's route.
Default: false
Example:
This flag is used when flag editOnSeparateRoute is enabled.
searchForContentChange
Boolean
Flag indicates whether to look for changes of model (and displaying corresponding changes on control) or not.
If flag is enabled component compares current detail array with used on component, removes deleted and marked as deleted on model level records, adds created on model level records.
Default: true
showAsteriskInRow
Boolean
Flag: indicates whether to show asterisk icon in first column of every changed row.
Default: true
showCheckBoxInRow
Boolean
Flag: indicates whether to show checkbox in first column of every row.
Default: true
showDeleteButtonInRow
Boolean
Flag: indicates whether to show delete button in first column of every row.
Default: false
showDeleteMenuItemInRow
Boolean
Flag: indicates whether to show dropdown menu with delete menu item, in last column of every row.
For in-row menu following properties are used:
Default: false
showEditMenuItemInRow
Boolean
Flag: indicates whether to show dropdown menu with edit menu item, in last column of every row.
For in-row menu following properties are used:
Default: false
showValidationMessages
Boolean
Flag: indicates whether to show validation messages in every row or not.
Default: false
store
Service
Ember data store.
useSidePageMode
Boolean
The value of the useSidePageMode property for the modal windows used by this component.
It can be configured through the configuration file (config/environment.js).
Default: false