I added an input field inside my survey component by inserting <input></input> inside my questions fields under the Data tab. Output is shown on the second photo.
Now I'd like to add another column for another input field to the right of the first column.
Also, I like to have table headers for the first and second column.
Or are there any other workaround to achieve the same output?
Hi Yors,
The best way to achieve this would be to use the data-grid component instead of the survey. Heres how I would approach this:
Drag a data-grid into your form. You will notice that the grid contains some component already by default. You should remove them by hovering over them and pressing "x".
Drag a Text Field into the First column. The label you provide will appear in the table header.
Drag Checkbox fields into the next columns. Make sure to uncheck the "Show Label in DataGrid" setting under the display tab of the checkbox settings. This will make it look how it looks in the survey component.
Drag another column into the last column of the data grid.
Here is an example of the final output.
Update:
You can also modify the checkboxes columns in your data-grid to function similarly to those in the survey/radio component (enable only one column to be selected at a time) by incorporating code in the OnChange event to clear the other checkboxes.
Open the component setting to EACH checkbox and navigate to the logic tab.
In the OnChange property add javascript to clear the value of other checkboxes. Here is an example for the (A+) and (AB+) checkboxes
// Clear everything but the a column row.aB = false row.b = false row.c = false
Under the data column of EACH checkbox navigate to the data tab and set the "Redrew On" property to "Any Change"
Here is a example of the final output with this logic applied.
Hi Yors,
The best way to achieve this would be to use the data-grid component instead of the survey. Heres how I would approach this:
Drag a data-grid into your form. You will notice that the grid contains some component already by default. You should remove them by hovering over them and pressing "x".
Drag a Text Field into the First column. The label you provide will appear in the table header.
Drag Checkbox fields into the next columns. Make sure to uncheck the "Show Label in DataGrid" setting under the display tab of the checkbox settings. This will make it look how it looks in the survey component.
Drag another column into the last column of the data grid.
Here is an example of the final output.
Update:
You can also modify the checkboxes columns in your data-grid to function similarly to those in the survey/radio component (enable only one column to be selected at a time) by incorporating code in the OnChange event to clear the other checkboxes.
Open the component setting to EACH checkbox and navigate to the logic tab.
In the OnChange property add javascript to clear the value of other checkboxes. Here is an example for the (A+) and (AB+) checkboxes
// Clear everything but the a column row.aB = false row.b = false row.c = false
Under the data column of EACH checkbox navigate to the data tab and set the "Redrew On" property to "Any Change"
Here is a example of the final output with this logic applied.
