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.
But if I move the components out the dataGrid, when they are alone, they have the correct data I need.
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();
});
})