Dear Team,
I hope this message finds you well.
I am reaching out to address an issue we've encountered while testing the functionality on the provided URL: " https://bryntum.com/products/grid/examples/columntypes/".
Upon selecting a Payment Method on the page, we expected to see a number field input box open up with a default value already displayed. However, it appears that the default value is not being displayed as intended.
We have thoroughly examined the code associated with this functionality, but have been unable to identify the root cause of the issue thus far. We believe there may be a discrepancy in how the default value is being assigned or rendered.
To provide more context, here's a snippet of the code we've been working with:
import { Toast, Grid, DataGenerator, Column, ColumnStore, StringHelper } from '../../build/grid.module.js?474605';
import shared from '../_shared/shared.module.js?474605';
//region Register custom column
// Extend Column to create your own custom column class
class StatusColumn extends Column {
// Define the type for this column, used in your columns config to add this column
static type = 'status';
// Override default values
static get defaults() {
return {
align : 'center',
field : 'status',
editor : {
type : 'combo',
editable : false,
autoExpand : true,
items : [
[0, 'Todo'],
[1, 'In progress'],
[2, 'Review'],
[3, 'Finished']
]
}
};
}
renderer({ value }) {
const colors = {
0 : 'blue',
1 : 'orange',
2 : 'red',
3 : 'green',
4 : 'purple'
};
if (typeof value === 'number') {
return {
className : {
'status-tag' : true,
[`b-color-${colors[value] || 'gray'}`] : true
},
children : [
{ text : this.editor.items[value]?.text }
]
};
}
return '';
}
}
// Register with ColumnStore to make the column available to the grid
ColumnStore.registerColumnType(StatusColumn);
//endregion
new Grid({
appendTo : 'container',
selectionMode : {
row : true,
checkbox : {
// These configs are applied to the checkbox selection column
checkCls : 'b-my-checkbox'
},
showCheckAll : true
},
columns : [
{ type : 'rownumber' },
{
text: "Payment Method",
field: "PaymentMethod",
order: 20,
width: 500,
htmlEncode: false,
default: true,
action: false,
type: "widget",
widgets: [
{
type: "radiogroup",
name: "resolution",
options: {
A: "Cash",
B: "Check",
},
onChange: ({ source: radio }) => {
const { value } = radio;
const { record } = radio.cellInfo;
// Find the numberfield within the container and set its value to AmtDue
console.log(radio.cellInfo.widgets);
// Find the numberfield within the container and set its value to AmtDue
const container = radio.cellInfo.widgets;
console.log(container);
const numberfield = container.find(
(widget) => widget.type === "numberfield"
);
console.log(record);
if (numberfield) {
numberfield.value = 10;
record.partial_pay_amount = record.AmtDue;
numberfield.hidden = false;
numberfield.setValue(10);
}
},
},
{
type: "numberfield",
hidden: true,
value: 10,
},
],
},
{
type : 'check',
text : 'Enabled',
field : 'active',
widgets : [{
type : 'slidetoggle'
}]
}
],
features : {
headerMenu : {
moveColumns : true
}
},
data : DataGenerator.generateData({
count : 50,
addSkills : 3,
rowCallback(data) {
data.status = (data.id % 5) % 4;
}
})
});
We would greatly appreciate it if you could assist us in resolving this matter promptly. If there are any additional details or insights you require from our end to facilitate troubleshooting, please don't hesitate to let us know.
Thank you for your attention to this matter. We look forward to your prompt response and resolution.
Warm regards,
