Filling of DataTable programmatically with different field types

Filling of DataTable programmatically with different field types

Evgeniy VasylievEvgeniy Vasyliev Posts: 23Questions: 7Answers: 1

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!

This question has an accepted answers - jump to answer

Answers

  • Evgeniy VasylievEvgeniy Vasyliev Posts: 23Questions: 7Answers: 1

    Note please that questions is requested for JavaScript API only.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

    How do you receive the information?

  • Evgeniy VasylievEvgeniy Vasyliev Posts: 23Questions: 7Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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 VasylievEvgeniy Vasyliev Posts: 23Questions: 7Answers: 1

    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.

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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 VasylievEvgeniy Vasyliev Posts: 23Questions: 7Answers: 1

    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
    }
    
  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    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 VasylievEvgeniy Vasyliev Posts: 23Questions: 7Answers: 1

    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 VasylievEvgeniy Vasyliev Posts: 23Questions: 7Answers: 1

    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.

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    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 VasylievEvgeniy Vasyliev Posts: 23Questions: 7Answers: 1

    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?

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    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

This discussion has been closed.