formio
Pristine flag remains up when changing order of rows in datagrid
Describe the bug We use the pristine flag to signal form changes to the user, this works fine except when changing the order of rows in a datagrid. This change is not detected / reflected in the pristine flag of the form.
Version/Branch 4.14.10
To Reproduce Steps to reproduce the behavior:
- Create form...
- Add DataGrid, set allowreorder to true
- Use form, add a number of rows with values, make sure the form is pristine by submitting
- Change the order of th erows in the datagrid - see that the change is not reflected in the pristine status.
Expected behavior Changing the order changes the submission data, so pristine flag (on the form) should be lowered.
Screenshots N/A
Additional context N/A
Note that on the current sandbox (2024-05-14) reordering does not work at all - and only "default" version renders the form.
https://formio.github.io/formio.js/app/sandbox
Can you give a jsfiddle and possibly a video or some screenshots to help me reproduce?
Does this form definition work for you?
- Add some rows to the datagrid,
- Edit some field in a row and use the buttons to show and reset-to-true the pristine status of the form.
- Now change the order in the datagrid by dragging the hamburger symbol (does currently not work in the sandbox - per my comment above) - and check if the pristine status changes.
{
"display": "form",
"components": [
{
"label": "Data Grid",
"reorder": true,
"addAnotherPosition": "bottom",
"layoutFixed": false,
"enableRowGroups": false,
"initEmpty": false,
"tableView": false,
"defaultValue": [
{}
],
"key": "dataGrid",
"type": "datagrid",
"input": true,
"components": [
{
"label": "Text Field",
"applyMaskOn": "change",
"tableView": true,
"key": "textField",
"type": "textfield",
"input": true
},
{
"label": "Number",
"applyMaskOn": "change",
"mask": false,
"tableView": false,
"delimiter": false,
"requireDecimal": false,
"inputFormat": "plain",
"truncateMultipleSpaces": false,
"key": "number",
"type": "number",
"input": true
}
]
},
{
"label": "Check Pristine",
"action": "custom",
"showValidations": false,
"disableOnInvalid": true,
"tableView": false,
"key": "submit",
"type": "button",
"custom": "alert(form.pristine);",
"input": true
},
{
"label": "Pristine to True",
"action": "custom",
"showValidations": false,
"tableView": false,
"key": "pristineToTrue",
"type": "button",
"custom": "form.pristine = true;\nalert(\"Pristine value set to: \" + form.pristine);",
"input": true
}
]
Or simpler an html file that renders form and data.
Use hamburger to drag order and buttons to check and reset pristine state.
<html>
<head>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
<script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
<script type='text/javascript'>
window.onload = function() {
Formio.createForm(document.getElementById('formio'), {"display":"form","components":[{"label":"Data Grid","reorder":true,"addAnotherPosition":"bottom","layoutFixed":false,"enableRowGroups":false,"initEmpty":false,"tableView":false,"defaultValue":[{"textField":""}],"key":"dataGrid","type":"datagrid","input":true,"components":[{"label":"Text Field","applyMaskOn":"change","tableView":true,"key":"textField","type":"textfield","input":true},{"label":"Number","applyMaskOn":"change","mask":false,"tableView":false,"delimiter":false,"requireDecimal":false,"inputFormat":"plain","truncateMultipleSpaces":false,"key":"number","type":"number","input":true}]},{"label":"Check Pristine","action":"custom","showValidations":false,"disableOnInvalid":true,"tableView":false,"key":"submit","type":"button","custom":"alert(form.pristine);","input":true},{"label":"Pristine to True","action":"custom","showValidations":false,"tableView":false,"key":"pristineToTrue","type":"button","custom":"form.pristine = true;\nalert(\"Pristine value set to: \" + form.pristine);","input":true}]}).then(function(form) {
form.submission = {"data": {"dataGrid": [{"textField": "ww", "number": 3}, {"textField": "r", "number": 5}, {"textField": "p", "number": 7}, {"textField": "hhh", "number": 789}], "submit": true, "pristineToTrue": true}};
})
};
</script>
</head>
<body>
<div id='formio'></div>
</body>
</html>
Thanks for the information! I have logged a ticket for review by our planning team. In the meantime, if anyone would like to take a crack at fixing, we are always willing to review any contributions to resolve this behavior.
Internal reference: FIO-8457