Cannot set value manually for widget column fields

[chuckn0rris]

Forum post

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,

[ExtAnimal]

WidgetColumn needs this:

Then configure the NumberField with

{
                type: "numberfield",
                hidden: true,
                value: 10,
                valueProperty : null
            }

The issue is that changing the radio field changes the record. And changing the record causes the cell to be updated. And that sets the value if the field from the record field defined for that column. And that colun has no data field defined, so it's set to undefined.

What is the field supposed to contain? You can set it and swerve it being updated as above, but where does the value go then?

A use case needs to be defined, and then it would be written.