Filling of DataTable programmatically with different field types

Evgeniy Vasyliev

Hello everyone!

Maybe someone can help where it is possible to find any example on how to create a DataTable programmatically, where on the fly depending on external conditions we can add fields of different types, so the the Editor uses them for selection.

For example we get information that a table should contain 3 columns:
- select list (options provided)
- checkbox
- text

We need to generate a DataTable based on it and fill it with data, which are also taken from external data source.

I am trying to dig in API for this, however can not find any suitable page for explanation. Did you face any experience with it?

Thank you in advance!

Evgeniy Vasyliev

Note please that questions is requested for JavaScript API only.

tangerine

For example we get information that a table should contain 3 columns

How do you receive the information?

Evgeniy Vasyliev

Tangerine, thank you for response.

I am using DatatTables in web server of MCU (ARM Cortex). There are lots of parameters to configure and they are described using a meta language in Json file. So, I am reading this file and getting data on what should be a field type and what data to fill it with. So, I need to build the DataTable accordingly.

kthorngren

Datatables and Editor are initialized by passing parameters that are in a JS object, {}. Within the object are keys, such as fields for Editor or columns for Datatables. You can build these objects as JS variables which can be used in the parameters. This example shows one way to build dynamic columns for Datatables:

http://live.datatables.net/regatofe/1/edit

You can expand this to other parameters and Editor.

Does this answer your questions?

Kevin

Evgeniy Vasyliev

Yes, Kevin! I was able to use your example successfully for one of the cases.

However the question I am mostly interested in is a bit different: imagine that I am doing a properties configuration page on a server. All the properties are described in json file, the properties can be of the following types:
- list of options
- input value
- checkbox

So, I would like to use DataTables + Editor in order to solve this task.

For example please watch on this image on how I am doing it in application for Windows: technotrade.ua/Uploads/Datatables/Parameters.jpg

So, I want to find a solution to make the same using DataTables in a web server.

allan

Yes that is possible with Editor, but it won't read your database structure automatically. You'd need to read your configurated field information and then use the APIs of DataTables / Editor and the server-side libraries to built up the objects needed.

Allan

Evgeniy Vasyliev

Yes, Allan, exactly! Actually there is no database cause this is MCU, there is a separate API for communication, so I need to handle all the data processing locally using javascript.

The question is: can you point any example on where can I find any useful example on how to modify the Editor depending on the field type, so that it can display different data, I mean something like:

if (field.type === 'select') {
    // Prepare options list
} else if (field.type === 'checkbox') {
    // Prepare checkbox
} else if (field.type === 'text') {
    // Prepare text with possible mask
}

allan

In Javascript you would use the add() method. Basically do your if logic from above, adding the required configuration for each field.

In DataTables the columns can only be defined at initialisation time, so you need to build up a column array (columns) which can be used during the initialisation.

Allan

Evgeniy Vasyliev

Allan, can you please give an example on how to check the row type on edit button click and display the data accordingly (select, checkbox, integer)?

Evgeniy Vasyliev

For example imagine that I have a datatable, which I am using for configuration of 2 parameters:

1. Parameter 1 has a checkbox (enabled/disable)
2. Parameter 2 is a list of possible options
   (in real applications there are bigger types of parameters, but for example these 2 are enough)

So, what I need to do is to display both parameters in a same table, however when I edit the parameters:
- when I edit parameter 1 - then I need to see a checkbox
- when I edit parameter 2 - then I need to see a list of options to select from

So, the question is how to achieve this? Is it possible to make such a thing using Datatables? If yes - can you point to some example?

I am mostly interested to know how to make the logic: once I click on Edit button I need to prepare the editor to display the data accordingly. Which event should I use for this? Any possible example?

I know, guys, that you have a great experience with all such things and I am almost sure that such a task I am facing you already faced previously. So, please try to share any helpful example.

allan

If you are using Editor then it will automatically determine what field you want to display in the cell and show the corresponding field input type - e.g. in this example the last column in the table displays a select element as that is how it is configured.

At this time, the field type in Editor is not modifyable after the field has been created. If you want to change the field type you would need to remove it and then add a new field configured for the new type.

Allan

Evgeniy Vasyliev

Exactly! What I need to have various field types in the same column.
So, in row 1 I can have a checkbox, in the other row in the same column there will be a select list, in the third - a text area.

Is there a solution for this using Datatables Editor?

allan

Thanks for the clarification. Currently no - I'm afraid there isn't. A field has one specific type. However, two options are:

1. Remove the field each time an edit completes, so that when you start a new edit you can use add() to add the field of the required type.
2. Use multiple Editor instances, each configured with the different field types required and then trigger editing on the required Editor instance for the row in question.

Allan