Editor (without server-side) and multiple Dropdowns

VascoOliveira

I have an Datatables that loads the data from an REST API.
The Editor plugin provides editing functionality to the datatables, but without server-side processing for the Editor.

Some of the returned information needs to be rendered as a dropdown select box.

This is the main code for Datatables and Editor, two of the fields are dropdown's that need to be populated with the values returned from the REST API.

const editor = new $.fn.dataTable.Editor({
    table: "#table",
    fields: [{
            label: "Field1",
            name: "Field1"
        },
        {
            label: "Select1",
            name: "Select1",
            type: "select"
        },
        {
            label: "Select2",
            name: "Select2",
            type: "select"
        }
    ]
});

const table = $('#table').DataTable({
    ajax: {
        url: "api/load"
        type: "POST",
        datatype: "json",
        dataSrc: ""
    },
    keys: {
        editor: editor
    }
    columns: [{
            data: "Field1"
        },
        {
            data: "Select1"
        },
        {
            data: "Select2"
        }
    ]
});

From reading the documentation, the Select values are populated from the Options field:

        {
          "data": [
            {
              "DT_RowId": "row_1",
              "Field1": "Value 1"
            },
            {
              "DT_RowId": "row_2",
              "Field1": "Value 2"
            }
          ],
          "options": []
        }

What i haven't been able to understand, its what structure the JSON object needs, so that all dropdown fields are correctly populated.

What do i need to add in the JSON object, so i can populate the BOTH Select1 and Select2?

allan

The options property should actually be an object, not an array. That way the property name of each in it refers to the name of the field - e.g.:

"options": {
  "Select1": [
    { label: ..., value: ... },
    ...
  ],
  "Select2": [
    ...
  ]
}

Allan

VascoOliveira

Thank you very much for the quick response.

In my use case, the values for the Dropdown's may be different per row.

Is this type of structure possible?

options: {
  Row1 : {
      Select1: [
        { label: L1_ROW1, value: 1 }
      ],
      Select2: [
        { label: L2_ROW1, value: 2 }
      ]
  },
  Row2 : {
      Select1: [
        { label: L1_ROW2, value: 3 }
      ],
      Select2: [
        { label: L2_ROW2, value: 4 }
      ]
  } 
}

allan

No. If you need to vary the options by row you would need to use the update() method of the select field type. The dependent() method is particularly useful for that sort of thing.

Thanks,
Allan

VascoOliveira

Is there any example that i can study in order to understand how to change the select values per row?

VascoOliveira

@allan , please excuse me for this direct reference, but could you please direct me to an example on how to use the update() method to be able to provide different select values per row?

Even if there is no complete example, something that i could use to understand the process would be welcome.

By the way, the dependent() API method is not useful in this scenario, as the dropdown values are calculated in the server, are specific for each row, and do not change per any external event.

Thank you very much.

VascoOliveira

I've been reading the Editor documentation, but i haven't been able to discover a way to update a specific Select.

For example, assuming this table as an example:

---

Field | Select Field

F1 | SEL 1
F2 | SEL 2

F3 | SEL 3

As per the select documentation, to update the "Select Field", i would do:
editor.field('Select Field').update( [
'Mr', 'Ms', 'Mrs', 'Miss', 'Dr', 'Captain'
] );

The above code update all the dropdown's on the field 'Select Field' to be updated with those options.

Unfortunately, i haven't been able to found anything that could clarify on how to target a specific select, in order to be able to inject different options per row.

allan

Hi,

This blog post might be of some help - it doesn't show exactly what you are looking for, but it is very similar.

It makes use of dependent() to make an Ajax request to the server to get options for a dropdown list based on another value (which happens to be a drop down itself) - that takes the form:

editor.dependent( 'fieldName', 'ajaxUrl' );

Have a read over that blog post and let me know how you get on with it.

Regards,
Allan

allan

Btw, I've replied to both of your messages from my own contact pages and they both bounced back with errors: Recipient address rejected: User unknown in relay recipient table.

Allan

VascoOliveira

Thank you very much for the responses, and please excuse me for the multiple messages.

If i understood correctly, the only way to do this is by "binding" the Select field to a "dependent" field, and having the data returned from the server.

I was hoping to avoid so many calls to the server, as i'm able to return all information in the initial "api/load" call.

Is this the only way to achieve it?

allan

You can do it locally as well if you have the data that you need in Javascript. The dependent() method provides an option to give it a callback rather than making an Ajax call.

Allan

VascoOliveira

I see ... Perfect, i think it should be simple to make this work.
Thank you very much for all the support!