How do I listen for this event when I modify my Effort, and then limit the value entered by the user
Support Forum
Hi,
You need to use the beforeFinishCellEdit
event to achieve this.
Please check the docs https://bryntum.com/docs/gantt/api/Gantt/feature/CellEdit#event-beforeFinishCellEdit
Here is an example of how you can achieve it:
listeners : {
beforeFinishCellEdit({ inputField, value, oldValue }) {
if(inputField.$$name === 'EffortField') {
if(value.magnitude > oldValue.magnitude) {
// prevent executing the value
return false;
}
}
}
},
Best regards,
Tasnim
I put it under Features but it doesn't seem to work
features: {
listeners: {
beforeFinishCellEdit({ inputField, value, oldValue }) {
console.log({ inputField, value, oldValue })
if (inputField.$$name === 'EffortField') {
if (value.magnitude > oldValue.magnitude) {
// prevent executing the value
return false;
}
}
}
},
This is my project configuration. It still doesn't seem to work
ganttConfig = {
beforeFinishCellEdit({ inputField, value, oldValue }) {
console.log({ inputField, value, oldValue })
if (inputField.$$name === 'EffortField') {
if (value.magnitude > oldValue.magnitude) {
// prevent executing the value
return false;
}
}
},
viewPreset: {
base: 'weekAndDay',
id: 'myHourAndDayPreset',
headers: [
{
unit: "day",
increment: 12,
renderer: (startDate, endDate, headerConfig, cellIdx) => {
console.log(startDate, endDate, headerConfig, cellIdx)
return "";
}
}
]
},
visibleDate: '2022-01-10',
readOnly: true,
listeners: {
beforeEventDelete(event) {
console.log(event);
return false
},
},
project: {
listeners: {
change({ store, action, records }) {
console.log(action);
// if(action !='dataset'){
// (window as any).GanttComponent.component.SaveGanttChange(this.project.inlineData)
// }
},
},
// Let the Project know we want to use our own Task model with custom fields / methods
taskModelClass: Task,
transport: {
// load: {
// url: 'assets/data/launch-saas.json'
// },
sync: {
url: '/some/sync/url'
}
},
autoLoad: true,
// The State TrackingManager which the UndoRedo widget in the toolbar uses
stm: {
autoRecord: true
},
phantomIdField: 'PhantomId',
// This config enables responses validation and dumping of found errors to the browser console.
// It's meant to be used as a development stage helper only so please set it to false for production systems.
validateResponse: true,
},
dependencyIdField: 'id',
startDate: '2001-10-10',
endDate: '2025-12-24',
columns: [
{ type: 'wbs' },
{ type: 'name', width: 250 },
{ type: 'startdate' },
{ type: 'duration' },
{
type: 'effort',
},
{
type: 'resourceassignment', width: 120, showAvatars: true,
editor: {
listeners: {
change({ store, action, records }) {
// console.log(records);
// (window as any).GanttComponent.component.SaveGanttChange(this.project.inlineData)
}
},
picker: {
height: 350,
width: 450,
selectionMode: {
rowCheckboxSelection: true,
multiSelect: false,
showCheckAll: false,
},
features: {
filterBar: true,
group: 'resource.id',
headerMenu: false,
cellMenu: false,
},
// The extra columns are concatenated onto the base column set.
columns: [{
text: 'Calendar',
// Read a nested property (name) from the resource calendar
field: 'resource.name',
filterable: false,
editor: false,
width: 85,
}],
},
}
},
{ type: 'percentdone', showCircle: true, width: 70 },
{
type: 'predecessor',
width: 112,
dependencyIdField: 'wbsCode',
},
{
type: 'successor',
width: 112,
dependencyIdField: 'wbsCode',
},
{ type: 'schedulingmodecolumn' },
{ type: 'calendar' },
{ type: 'constrainttype' },
{ type: 'constraintdate' },
{ type: 'statuscolumn' },
{
type: 'date',
text: 'Deadline',
field: 'deadline'
},
{ type: 'addnew' }
],
subGridConfigs: {
locked: {
flex: 3
},
normal: {
flex: 4
}
},
columnLines: false,
features: {
pdfExport: {
exportServer: 'https://localhost:8088',
// Development config
translateURLsToAbsolute: true,
// For production replace with this one. See README.md for explanation
// translateURLsToAbsolute : 'https://localhost:8080/resources/', // Trailing slash is important
keepPathName: false
},
rollups: {
disabled: true
},
baselines: {
disabled: true
},
progressLine: {
disabled: true,
statusDate: new Date(2019, 0, 25)
},
filter: true,
dependencyEdit: true,
timeRanges: {
showCurrentTimeLine: true
},
labels: {
left: {
field: 'name',
editor: {
type: 'textfield'
}
}
}
},
tbar: {
type: 'gantttoolbar'
},
};
Please put the beforeFinishCellEdit
event inside of the listeners
object like this :
ganttConfig = {
....
listeners : {
beforeFinishCellEdit({ inputField, value, oldValue }) {...}
}
}
And then you need to add [listeners]
attribute to <bryntum-gantt>
like this:
<bryntum-gantt
#gantt
...
[listeners] = "ganttConfig.listeners"
</bryntum-gantt>
Best regards,
Tasnim