We want to double click the status bar to bring up a dropdown selection box, let the user manually modify the status, and listen for its state change, is this possible? Or should we add a new column?
Support Forum
It is possible. You can find StatusColumn.js in our advanced example. Check that editor set to false
in there. All you need is to specify the one you want.
https://bryntum.com/docs/gantt/api/Grid/column/Column#config-editor
All the best,
Alex
I set editor to true, but it still can't be edited manually
/*
* @Description:
* @Version: 2.0
* @Autor: shimnx
* @Date: 2022-05-18 18:17:27
* @LastEditors: shimnx
* @LastEditTime: 2022-05-20 13:25:43
*/
/**
* Status Column implementation file
*/
// Bryntum umd lite bundle comes without polyfills to support Angular's zone.js
import { Column, ColumnStore } from '@bryntum/gantt/gantt.lite.umd.js';
/**
* @module StatusColumn
*/
/**
* A column showing the status of a task
*
* @extends Gantt/column/Column
* @classType statuscolumn
*/
export default class StatusColumn extends Column {
static get $name() {
return 'StatusColumn';
}
static get type() {
return 'statuscolumn';
}
static get isGanttColumn() {
return true;
}
static get defaults() {
return {
// Set your default instance config properties here
field : 'status',
text : 'Status',
editor : true,
cellCls : 'b-status-column-cell',
htmlEncode : false,
filterable : {
filterField : {
type : 'combo',
items : ['Not Started', 'Started', 'Completed', 'Late']
}
}
};
}
//endregion
renderer({ record }) {
const status = record.status;
return status ? {
tag : 'i',
className : `b-fa b-fa-circle ${status}`,
html : status
} : '';
}
}
ColumnStore.registerColumnType(StatusColumn);
Please check your code. If you copied our Task.js for your data model, you can see how we get status
. It's calculated readOnly field based on others fields of task record ( see this.isCompleted
, this.isLate
, etc.). To have it "edited manually", create your own logic for that - remove/change our code, add that field to your JSON.
All the best,
Alex
I can now change status via the input field, but it will get an error
Please share runnable test case, we will check your code.
how do I change the input field to a drop-down selection?
Did you see docs I shared: https://bryntum.com/docs/gantt/api/Grid/column/Column#config-editor ?
We also have online demo here https://bryntum.com/examples/grid/celledit , check the source code.
It works same for all columns in all components since all of them are based on grid.
All the best,
Alex
Thank you, I now switch to the drop down selection box, error message I took a screenshot, you can run my code
- Attachments
-
- advanced examples.zip
- (137.56 KiB) Downloaded 38 times
Error message says:
zone.js:1213 Uncaught Error: Uncaught (in promise): TypeError: Cannot set property status of [object Object] which has only a getter
So, that happened because you have only getter defined.
As I recommended above, you need to remove our custom getter and just add that field into fields
, since it's just simple field:
export default class Task extends TaskModel {
static get $name() {
return 'Task';
}
static get fields() {
return [
{ name : 'deadline', type : 'date' },
'status' // all you need is this line.
];
}
// not sure if you need this
get isLate() {
return this.deadline && Date.now() > this.deadline;
}
}
and, of course, send value from your server-side with value for that field.
All the best,
Alex