bubble editor multi select not selecting values

seth9009

Hey guys,

so i've integrated bubble editor and i have a field that is a multi select, now in my datatables i have for that specific column i display data like this "option one, option two" when i click on it the bubble editor opens with the select options "option one, option two, option three" and all works fine, BUT what does not work is the fact that "option one and option two" are not selected in my bubble editor select, my raw json for the field looks like this

{"name":"multi_list","label":"multi list","type":"select","attr":{"multiple":true,"size":5},"options":[{"label":"Please select","value":""},{"label":"option one","value":"option one"},{"label":"option two","value":"option two"},{"label":"option three","value":"option three"}]}

i checked the https://editor.datatables.net/reference/field/select for details on selected options but nothing ... i've tried different things but i can't make it select the options i want ...

any help is appreciated, thanks!

allan

Could you post a link to the page please? If the option is not selected it suggests the field's value doesn't match the value in the options array.

Allan

seth9009

Hi Allan,

Unfortunately i can't .. i have it on my localhost and even so it's part of a bigger system ... but i just checked and the values are the same i used the same thing "option one, option two, option three" for values and keys also to keep things simple ... but it just does not show them selected when i open the editor ... do u want me try to setup a http://live.datatables.net ? or is there a setting i'm missing ? like a "selected" : true on options array ? although i've try it and it does not work

seth9009

I've created a live.datatables.net jsbin .. it does not work (the bubble edit) not sure why the code is the same as on my PC .. it gives a js error when u try to click on a cell form what i've seen on stack overflow is something related to same origin policy of included scripts .. anyway it does not really matter, u can see on the JS box my datatables and editor code and how the multi select and simple select looks and how the table looks .. but when i click on multi select it does not select the selected options like it does on single one .. here is the jsbin below

http://live.datatables.net/dinahuxe/

allan

Hi,

The example gives a Uncaught Unable to find row identifier. Adding an id to each row fixes that and lets the bubble editor show up.

With that fixed the reason that it isn't selecting values there is that the data point is a string (e.g. option 1, option 2) and you need to tell Editor that it should split that string into multiple values. In this case it is comma+space separated. You'd do that with the separator option of the select field type.

And one other thing, we need to use multiple at the top level of the configuration object for the field to tell Editor that it is a multiple value field (rather than in the attr option).

Updated example: http://live.datatables.net/dinahuxe/7/edit .

Allan

seth9009

awesome thanks! putting multiple and separator outside of attr array fixed the problem.

seth9009

sorry one last question on the topic ... is there a way to make options selected if values are different ? i've made an update on the jsbin

http://live.datatables.net/dinahuxe/8/edit

allan

Not really. With that example the value is based on the string "option 1" (for example), but there is no matching value.

What you need to do instead is have both the label and the value in the data source for your DataTable. That way you can tell DataTables to display the label, and tell Editor to use edit the value.

This example shows how that can be done with a JSON data source.

For an HTML data source its going to be a lot harder! Are you using Ajax / JSON?

Allan

seth9009

unfortunately i'm not working with JSON data i'm trying to integrate this into a legacy CMS and the tables are PHP generated, anyway thank you again for your reply!

allan

Okay, so with an HTML data sourced table what you would need to do is have another hidden column with the values.

Updated example: http://live.datatables.net/dinahuxe/9/edit

(Its actually not quite as hard as I had though earlier!)

Allan