Would be cool as already posted to have some editable grid or table. So changes could be done inline and very fast, without putting separate visible updateform etc.
Bump.
Iām trying to migrate an Access application (LOB) with lots of datasheets. I need this functionality.
Best would be to provide native support for something like this:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Overview/jQuery/Light/
1 Like
If the inline editing is the main requirement, you might be able to achieve what you want by setting a variable to toggle between display/editable text. Eg here you can edit with modals, or inline:
4 Likes
This is definitely warmer, and I do need the inline editing, but I need to also batch save, because saving for each item is too onerous for large numbers of records. Ideally, simply leaving the focus of a field will save the data to the DBā¦ It it also needs to perform CRUD with a database (SQL Server in this case), and needs to be able to populate other datasheets based on the current selection. It also needs to support sorting, filtering, etc, etc.
I know SQL Server can return query results as JSON, not sure if that can be used to bind fields.
Is it possible to take an external JQuery/Angular/React library, such as the one I linked to, and import it into Wappler, or have it somehow introspected??
Please excuse my ignorance. I am one person designing/managing our DB, developing our software, and administering our network. I have little web development experience.
Thank you!
You donāt need any of those. Wappler already have a reactive library called App Connect that connects to your Server Actions/queries and gets its data in JSON for client side rendering.
So you can very easily build your own inline editor even with hot saving on leaving the input field.
2 Likes
This is indeed very easy to do - using a dynamic event to submit the form. However, Iām not sure what event would be the best option. If you choose either āValue Changedā or āValue Updatedā, the form is submitted on each key stroke which is not ideal. These events seem to behave in just the same way (should they?).
If you choose onblur for the event, the update will happen even if no change is made - so if you have a notification confirming the change, it will appear even if there is in fact no change. Perhaps you could store the contents in a variable initially and then check it onblur - but this is probably over-complicating matters.
I have a feeling thereās probably an obvious solution Iāve overlooked. Some way of using a conditional event - triggered only if the input data has changed?
OnBlur event would be the standard as long as there is a change as you mentioned.
But wouldnāt be ideal for the reason I mentioned. I think the solution is to use the āBefore Changeā event - but I wouldnāt have thought this should be the best option.
I noticed āValue Changedā was adding ādmx-on:changedā to the code. I changed this to ādmx-on:changeā and it worked as I wanted/would have expected. The event was triggered onBlur - so not updating on every keystroke. I tried each data event to see which would produce this event. It was the āBefore Changeā event.
Is this a bug or confusing terminology (or just me)?
That is why we have a debounce option as modifier. So add a debounce of 200ms and the form will be submitted after the user really stopped with typing.
I use the debounce option a lot - itās a great feature - and updating in this way might be a good solution.
However, only updating when the user has finished editing a particular field might also be a good option, depending on the circumstances, and it seemed that using the Value Changed event should do this - but it doesnāt. As I mentioned, I had to use the āBefore Changeā event to get this to work, to generate ādmx-on:changeā.
I mean that the OnBlur javascript event is the standard approach for data changes used in inline editors.
Datatables uses this approach for instance.
Iām sure itās a good solution in most cases - and one I would typically use.
Itās just that I was just experimenting with the options and using a notification to confirm the updates were firing when I noticed the update confirmation appearing - when no update was made.
1 Like
Would be great to see a tutorial on this if someone could have a go, I have seen table data that launch modals or click edit first etc.
But nothing inline built in Wappler
https://mdbootstrap.com/docs/jquery/tables/editable/#!
You can create an option to edit inline quite easily in Wappler.
In the example above, I created two rows - one for displaying data and one for editing it. Only one row is shown at a time, depending on the value of a variable, eg:
dmx-show="inline_edit.value == 1"
This has a default value of 0. There is a button to toggle the value of the variable.The editing row has a form with a submit button (though, as discussed above, there are different ways to handle this).
Essentially, itās no different to using the show/hide dynamic attributes in any other situation.
2 Likes
Using the blur method, how should the data be sent to the Update action? Currently, Iām sending an update, but the update has no query parameters attached to it, so no data is actually being updated.
Would anyone mine screenshotting how to connect the input box to the update query?
Iām no expert, but I did recently get this working perfectly in my own project.
I just set the dynamic event to Blur -> submit form.
The form does NOT have auto-submit selected and everything works fine. I also added some reset and server connect reload events on the Blur Click to update the data the momeent the user leaves the cell.
Does that help or do you want more screen shots?
Thanks Philip. So I have a similar thing in the Dynamic Event:
Is your server connect ālookingā for the data somehow?
Without knowing exactly what you have set up or not, as long as the form is a server connect form, and in that query you have the POST parameters named EXACTLY the same as the NAME field as the input on the app connect side, then it should pass the data correctly.
At least thatās how i would explain it to myself 
How did you get the row for editing? I can understand how youāre hiding the row, but how do I go about getting an editable row?
There are two rows - one with an editable textarea, which is only visible if a condition is met:
dmx-show="inline_edit.value == 1" (or without the ā ==1ā if you prefer)
This variable is set using the blue button at the top right (in the animated gif above). The other changes to the table display also use this variable and dynamic show/hide attributes.