0

I've implemented with form.io a datagrid with different value types ​​(textFields, textArea, radio, day...) and I am having a problem with several of them.

I make a GET request to a service that returns an object filled with data, and the idea is to paint the dataGrid cells ​​with that data, matching the response keys with the dataGrid keys.

It works correctly, I am able to retrieve all the values ​​and match them however, they are not displayed dynamically in my application, that is, the data that I retrieve in the 'radio', 'day' and 'textField' elements does not appear visually.

However, the ones that I recover in 'textArea' or 'number' do appear to me.

However, doing some more research, I realized that by dynamically removing the components from the dataGrid, and isolating them, they do have the data I want. That is, for some reason, inside the dataGrid they are not shown, but outside of it, yes.

This is my dataGrid filled with the response. The radios memberShip and gender are empty.

DataGrid bad worked

But if I move the components out the dataGrid, when they are alone, they have the correct data I need.

Radios out of dataGrid

Is there a problem with this in Form.io? Must I do somethink that I don't know? Thanks This is how I fill the dataGrid

UPDATE: Add full code with fill function of dataGrid

function fillDataGridWithResponseData(componentsConfig, data) {
    const dataGridComponent = componentsConfig.components;
    if (dataGridComponent) {
       // const dataGridRows = dataGridComponent.components || [];
        const responseRows = data.dataGrid[0];

        for (const key in responseRows) {
            if (responseRows.hasOwnProperty(key)) {
                const columnComponent = dataGridComponent.find(component => component.key === key);

                if (columnComponent) {
                    if (columnComponent.key === "gender") {
                        columnComponent.defaultValue = responseRows[key].toUpperCase();                            
                    } else {
                        columnComponent.defaultValue = responseRows[key];
                    }
                }
            }
        }
    }
}

This function is called when Form.io builds the form

            Formio.builder(document.getElementById('builder'), componentsConfig)
                .then(function (form) {
                    fillDataGridWithResponseData(componentsConfig, data);
                    form.redraw();
                    form.on('change', function (event) {
                        formResult = event.data;
                        updateSubmitButtonStatus();
                    });
                })
Talenel
  • 422
  • 2
  • 6
  • 25

0 Answers0