Is there a way to modify the Data Table so that it will work better on mobile?
On a monitor, a multi column table works well, but not for mobile.
Is there a way to move the columns so that instead of being shown horizontally, one after the other, they are shown vertically, one under the other?
This way it will be easier to fill them in.
Any other alternative is welcomed.
The idea is to have multiple fields related to one item, and the ability to add another row/column to add more items.
Dear @Viorel,
How do you see it working? We might be able to offer paid support to improve the control if you're interested, but we need to know your exact needs.
One way to do it would be to open a subform, when Add new record button is clicked, where user would be able to fill out every column as a separate field.
If you're interested in paid support and would like us to evaluate the time needed, contact us at support@plumsail.com
Hi Nikita, apologies for the late response.
Yes, indeed! A subform would be ideal!
So when users tap 'Add new record' they get a popup (or different page/slide) where they can fill in each column, except the fields are one under the other, as supposed to users needing to scroll left and right to insert data.
I've tried to illustrate it in the diagram below:
All the table headers, are now displayed horizontally, and users fill in one row at a time.
User clicks 'Add new record'
New page/slide opens up.
They fill in info necessary for one row, then click save.
They add as many records as necessary following the above steps.
Once done they move on to the next section.
(Or maybe users can click on a button next to the 'save' button that says 'save & add more', which will save current row, and allow users to add another row.
Dear @Viorel,
I've passed the feedback to our dev team, we might get to it one day, but if you want to see it implemented soon, we can offer paid support, just write to us at support@plumsail.com to evaluate the time needed.
Hi Nikita,
I would like to report something. I noticed DataTable has changed already based on the wishlist above: Before, it was working on mobile when in edit mode; the sample structure items below show that it doesn't.
Note that, below will work in desktop not on mobile for "on change" dropdown control.
fd.rendered(function() {
fd.control('Control1').$on('edit', function(e) {
console.log(e)
if (e.column.field === "Column1") {
//pass widget + current column value
console.log(e.model);
populateColumn(e.widget, e.model.Column1);
}
})
});
function populateColumn(widget, value) {
widget.setDataSource({
data: ['Category A', 'Category B', 'Category C']
});
//set value if one was select
widget.value(value);
}Dear @prax.rellosa,
Welcome to the community! This is new functionality, not yet fully described, but you can try the following code:
fd.rendered(function () {
fd.control('Control1').$on('edit', function (e) {
if (e.column) { //PC
if (e.column.field === "Column1") {
populateColumn(e.widget, e.model.Column1);
}
} else { //mobile
const widget = fd.control('Control1').config.getWidget("Column1", e.container);
populateColumn(widget, e.model.Column1);
}
})
});
function populateColumn(widget, value) {
widget.setDataSource({
data: ['Category A', 'Category B', 'Category C']
});
//set value if one was select
widget.value(value);
}