[CODE]
- ENVIRONMENT
========================================
Component : Bryntum Gantt
Editor Type : Combo (AjaxStore, URL-based)
Framework : React + TypeScript
Package : @bryntum/core-thin
Column Type : Custom Field (non-Bryntum column, bryntum: false)
========================================
- PROBLEM SUMMARY
========================================
We have implemented a custom "User" type combo column in the Bryntum Gantt grid.
Issue:
- Clicking the cell does NOT open the dropdown
Even though:
✔ Column has readOnly: false
✔ Editor configuration is defined
✔ API URL is correct and returns valid data
Attachment:
- Screen recording demonstrating the issue
========================================
- COLUMN CONFIGURATION (SERVER RESPONSE)
========================================
{
"sortable": true,
"resizable": true,
"title": "User CF",
"dataIndex": "t_cf_2521",
"id": "t_cf_2521",
"width": 134,
"editPerms": [321],
"pn": "custom_cf2521",
"editor": {
"type": "combo",
"options": [],
"minChars": 2,
"url": "comboquery.do?what=person&purpose=USER",
"name": "custom_cf2521",
"fieldLabel": "User CF",
"multiple": false,
"allowBlank": true,
"allowClear": true
},
"field": "custom_cf2521",
"name": "custom_cf2521",
"renderer": "bizObjectRenderer",
"bryntum": false,
"readOnly": false,
"cWidth": true
}
========================================
- API RESPONSE (COMBO URL)
========================================
Endpoint:
comboquery.do?what=person&purpose=USER
Response:
[
{
"iconTitle": "User",
"mentionName": "AaryanThipse",
"depth": 0,
"avatarUrl": "https://dev.celoxis.io/psa/ui/avatar.do?...",
"name": "Aaryan Thipse",
"client": false,
"value": 3176,
"iconCls": null,
"label": "Aaryan Thipse",
"holy": false,
"tooltip": "Workspaces: Default",
"fqName": "Aaryan Thipse"
},
{
"iconTitle": "User",
"mentionName": "AmishSharma",
"value": 3175,
"label": "Amish Sharma",
"name": "Amish Sharma"
}
]
========================================
OBSERVED BEHAVIOR
========================================Clicking the cell does not able to edit.
Dropdown is not opening at all
========================================
EXPECTED BEHAVIOR
========================================Clicking the cell should open a combo dropdown
Dropdown should fetch and display API data
User should be able to select a value
========================================
ADDITIONAL CONTEXT
========================================This is a custom column (bryntum: false)
Editor is configured using a URL-based approach
API response includes both "value" and "label" fields
No explicit store configuration is provided for the combo
========================================
QUESTIONS
========================================Is editing supported for columns marked as "bryntum: false"?
Does the combo editor REQUIRE explicit store configuration
instead of only providing a "url"?Are we missing required mappings such as:
- valueField
- displayField ?
Could this issue be related to how editors are initialized
for custom (non-Bryntum) columns?
========================================
- EXPECTED GUIDANCE
========================================
We are looking for:
- Correct way to configure a dynamic combo editor
- Best practice for integrating custom columns with editors
- Any required changes for enabling editing in such cases
-Code Ref:
import { AjaxStore } from "@bryntum/core-thin";
import Utils from "src/Utils";
const bryntumEditorTypeMap = {
text: (editor) => ({
type: "text",
}),
date: (editor) => {
const dateEditor: any = {};
dateEditor.type = "datefield";
dateEditor.weekStartDay = editor.startDay;
dateEditor.format = editor.format;
dateEditor.stepTriggers = false;
dateEditor.keepTime = "entered";
return dateEditor;
},
combo: (editor) => {
const comboEditor: any = { ...editor };
if (!editor.url) {
comboEditor.items = editor.options;
}
comboEditor.multiSelect = editor.multiple;
if (editor.url) {
comboEditor.store = new AjaxStore({
autoLoad: true,
readUrl: Utils.getResourceUrl(editor.url),
responseTotalProperty: "total",
responseDataProperty: "root",
pageSizeParamName: "limit",
pageParamName: "page",
filterParamName: "query",
pageSize: 100,
remotePaging: true,
encodeFilterParams: (filters) => {
let filterValue;
filters.forEach((filter) => {
filterValue = filter.value;
});
return filterValue;
},
} as any);
}
comboEditor.displayField = "label";
comboEditor.valueField = "value";
comboEditor.minChars = editor.minChars;
comboEditor.keyStrokeFilterDelay = 500;
// Adds a clear (✕) button to reset the selected value when allowClear is enabled
comboEditor.clearable = editor.allowClear;
return comboEditor;
},
number: (editor) => ({
type: "number",
}),
richText: (editor) => ({
type: "textArea",
}),
taskTeamPicker: () => {
const resourceEditor: any = {};
resourceEditor.picker = {};
return resourceEditor;
},
duration: () => {
const durationEditor: any = {};
return durationEditor;
},
};
export { bryntumEditorTypeMap };
========================================
[/CODE]
