Editor 2

I am delighted to introduce Editor 2! It has been almost 9 years since I originally introduced Editor, and the v1 series of releases have introduced a large number of major new features, including multi-row editing, custom templates, and support for .NET and NodeJS on the server-side. Editor 2 packs in a number of major new features, which I'll discuss below.

Upgrading

No doubt the first questions you'll have is "How can I get this upgrade" / "How much will it cost"? Let's answer them straight away:

• If you purchased Editor after 1st January 2020, we have automatically updated your license and you can download Editor 2 and all updates for it for one year.
• If you purchase Editor in 2019 or earlier, an upgrade license is available for a renewal price, which is half the cost of your original license.
• If you don't have an Editor license yet, head over to our purchase page or start a trial on the Editor download page.

Licensing

With the introduction of Editor 2 we are changing our licensing structure slightly to be yearly renewable for upgrades. It is important to be clear that the software you have access to will never expire. When you purchase Editor, you will automatically receive all updates for one calender year - at the end of that period you can continue using the software as you were. If you wish to upgrade to newer versions after the upgrade period (one year) you must purchase a renewal license. Our new checkout has the option to set up a subscription if you would like the renewal to happen automatically, or you can purchase on an ad-hoc basis as you require. A benefit of an annual subscription is that the renewal price will be discounted by %20 in subsequent years while you remain subscribed.

Editor 2 continues our "per developer" licensing, which we believe offers the best and fairest value, since of course it is the developers using Editor that gain the time savings offered by Editor. The number of end users of your application doesn't matter for the license - you can focus more time on improving your application to get those users in! Our new checkout now offers the ability to select the exact number of developer licenses you wish to purchase (previously limited to 1, 5 and 10). Now, if you click on the number bar at the top of the pricing grid you can select 1 to 50 developers, with a company-wide option for large teams.

Performing the upgrade

See below for the note about the tidy up on the code base which has removed some legacy features. But most importantly for the upgrade, we have moved the library we had for the date / time picker in Editor into its own standalone library which allows it to be easily reusable for extensions such as SearchBuilder. The upshot is that if you are using the datetime input, you must now also include the new DateTime library. It is available on our download builder and CDN to make that inclusion easier.

Aside from that, the upgrade process is the same as any other release of Editor - replace the existing Javascript and CSS files with the new ones, and if you are using the PHP, .NET or NodeJS server-side libraries, upgrade them as well.

Editor v1 support

Editor 1.x is now is support mode only and will not see any new features. Over the next year, until 9th March 2022, we will continue to support Editor 1.9 and address any critical bugs with patch releases of the 1.9.x series as required.

New features

Editor 2 has seen tweaks and improvements across all sections of its code base, but there are a number of headline features that I'd like to draw your attention to. These have been largely informed by feedback from you, the developers using Editor, our own use of Editor and also our work on CloudTables which is already using Editor 2!

The major new features are:

• DataTable as an input
• Nested editing
• Inline editing with multiple fields
• Bootstrap 5 support
• Tidy up

DataTable as an input

Editor 2 introduces a new datatable input type which let's us use a DataTable as an input field, displaying columns of data with selectable rows. It can be used to replace checkbox, radio and select input types (although those still exist if you want to use them!) with a regular interactive DataTable:

The DataTable field type allows any of the standard DataTables' configuration options to be set using the config parameter on the field (e.g. you might wish to enable scrolling, rather than using paging). It will work with the label / value option pairs that also work for the select and other field types (thus working really easily with our left join server-side libraries), but can also be configured for other properties and to show multiple columns.

A range of examples are available here:

• DataTable as a single select
• Multiple selection
• DataTables options - scrolling
• Column control
• Custom label / value properties.

Nested editing

Over the years we greatly increased our knowledge of how users want to interact with data, and one lesson is that it is really frustrating to need to load a separate page to add (or edit) an option that you want to select as a left joined values for a parent form. To address that Editor can now handle multiple layers of nested editing, accessed through the new datatable field type:

You can see this in action below - you'll be able to note from the code that the nested Editor is just a regular Editor instance giving the full range of configuration options:

• DataTable as a single select.

Inline editing with multiple fields

Until now if you've wanted to show more than a single field as editable at a time, you had to use the main editing form or bubble editing. Now with Editor 2 it is possible to show multiple fields in a single row as editable together:

Furthermore, a much requested feature is the ability to add a new row inline, which is now possible through the inlineCreate() method.

It should be noted that inline editing is still only suited for simple tables and data - you can't edit data which isn't shown in a column for example - the main editing form would still be required for such data, but for simple data sets, this new ability and decrease data input time for users.

• Icon control of full row editing
• Full row editing, click in any cell
• Inline creation of new rows
• Blur submit of data.

Bootstrap 5

With the up coming release of Bootstrap 5 (beta 2 is the current release at the time of writing), we will be rolling out support for Bootstrap 5 across DataTables and all of its extensions. Editor 2 has support from day 1.

.

A live example of Editor and DataTables with Bootstrap 5 styling can be found here;

• Editor with Bootstrap 5 styling

Tidy up

As noted at the start of this article, Editor has been around for nine years in its 1.x incarnation, so there was a bit of legacy baggage that was slated for removal in v2 - this has now been done. You are unlikely to be effected if you have been keeping up with the v1 releases, but for completeness, the following options have been removed:

• ajaxUrl option - replaced by ajax. The ajaxUrl option was the original way for configuring Ajax with Editor, but was superseded by ajax in Editor 1.3. ajaxUrl has been deprecated since then. If you are still using ajaxUrl then you can simply replace it with ajax.
• date field type. This depended upon either the jQuery UI library, or the HTML5 date input type which is poorly supported in browsers and offers little flexibility. The built-in datetime input type should be used instead, which has been available since Editor 1.5.
• dbTable option. This was deprecated in Editor 1.3 and has not been documented since. It was used to provide a database table name to the server - ajax.data should be used now if you wish to send extra information to the server in Ajax requests.
• fields.dataProp option - fields.data is the direct replacement. The old naming hasn't been used since Editor 1.3, but has been mapped to fields.data if provided.
• legacyAjax option. Editor prior to v1.5 used a "flat" data structure when submitting to the server. The support for multi-row editing meant that was no longer suitable and was replaced by a new standard. The old style could be invoked using the legacyAjax option which has now been removed. If you require to still use the legacy for for any reason, the following preSubmit and postSubmit event handlers can be used:

Additionally:

• Support for the legacy DataTables extension "TableTools" which was replaced by Buttons and Select in 2015.
• DateTime library has been separated into its own library (DateTime). To use datetime you must now include that library, otherwise an error will be thrown (with a message explaining what is wrong and a link detailing the issue and how to fix it).

Summary

There is of course much more in Editor 2 than just these headline features - e.g. the ability to use language information from a JSON file loaded by DataTables, a new ajax.replacements option, and field get and set formatters. For full details, please see the 2.0.0 release notes.

We hope you enjoy Editor 2 as much as we enjoyed developing it!