Extend TMS WEB Core with JS Libraries with Andrew: Tabulator Part 5: Editing Data in Tabulator
In our continuing Tabulator adventures, last time out we barely scraped the surface when it comes to interactions. We had a little side adventure into tooltips, potentially applicable to many TMS WEB Core projects. And we got quite a bit further down the path of making our example project, Actorious, more useful. Grid-type controls are a natural fit for effectively organizing and displaying all kinds of data. But in some cases, we’ll actually want to give the user the ability to make changes to the data, either by editing it directly or by using other elements on the page. In this article, we’re going to primarily be looking at this special subcategory of interactions and how to get the most out of Tabulator when building editing interfaces into your TMS WEB Core projects. Motivation. As we discussed at the outset of this Tabulator miniseries, the basic concept behind it and similar JavaScript grids is that they ultimately have a bit of a self-centered view of the world. Meaning that they are, in effect, the entire package of data and UI elements. As developers, we’re basically connecting them up at a pretty high level, providing them with data and letting them do as much of the work as possible from that point on. When it comes to editing data, this doesn’t really change. Tabulator, in particular, has many options related to editing data, which we’ll get into shortly. The potential problem, though, is in keeping track of what it is doing in case you need to take those changes and apply them elsewhere, like in the actual data source that you’re using. From a Delphi standpoint, it might help to think of a JavaScript grid as a disconnected TClientDataSet. You’re basically giving it a block of data. And when it’s done, you’re getting a block of data (the changes) back. What format that communication takes is entirely up to you, and we’ve got a few options, as usual. The mechanisms that you ultimately end up using will hopefully result in a very cohesive and highly integrated and performant product. So let’s have a look at some of those options. Column Definitions. Again. As with so many things in Tabulator, the easiest way to get started is by adding some options to the Tabulator column definitions. By default, columns are not editable at all, but can easily be set to be editable. The only question is what kind of editor do you want? Let’s start with a simple new example project, TabulatorEditor, and then work our way first through a few of the built-in editors. Quick and easy. The usual Project.html additions can be used to load the Tabulator library. If you’re using the JSDelivr CDN, it also offers the ability to combine many libraries into a single request. We’re going to end up using the latest version of Bootstrap, Luxon and FlatPickr, so why not combine them all. Here’s what it looks like. In our WebFormCreate procedure, we can then create a basic Tabulator setup similar to what we’ve done previously. In this case, there are just a bunch of different field data types, so we can play around with how the editors might work. The Tabulator Documentation has plenty of examples, so we’re not […]
