Create List Field with values dependent on another field

ericlevy

I am hoping someone can point me in the right direction with DataTables Editor. I am using the editor locally, because it is connected to an API, so I pull down all of the data and then post it back to the API. Let's assume I have a list of items and each item can have multiple vendors:
data = [
{
itemName:'item1',
selectedVendor:'vendorA',
availableVendors: 'vendorA; vendorB; vendorC'
},
{
itemName:'item2',
selectedVendor:'vendorD',
availableVendors: 'vendorB; vendorC; vendorD'
},
{
itemName:'item3',
selectedVendor:'vendorC',
availableVendors: 'vendorA; vendorC; vendorD'
}
]

I am trying to figure out in editor how to populate a select list upon clicking with the available Vendor data and make the selectedVendor default.

I've tried 3 or 4 different options, but can't seem to make it work... Below is an example:
https://live.datatables.net/vejeqafu/73/

Thanks!
Eric

rf1234

I am not sure whether I really understand what you mean, but I made your example work (it was throwing errors):
https://live.datatables.net/mojutivo/1/edit

I am exaggerating a little: The data table works now, but not the Editor. Maybe you can explain what you really want to achieve a little more?!

I will probably not be very helpful with your Editor. I've only been working with Editor on both sides: client and server - and you seem to be doing something different here.

allan

Worth having a look at this blog post for details on how to do cascading lists as well.

Allan

ericlevy

Thanks to both of you. I think what you are describing is close @rf1234. @allan , I had looked at cascading lists, but the challenge is there are quite a few different options so let's say I have 10,000 items and each item can have several vendors, there isn't likely a lot of commonality commonality.

I didn't see your post (for some reason I didn't get an email response or didn't see it) until today. I was going down the route of creating a custom type (e.g. select2) and this approach works well, except when I click away from the select (e.g. onblur gets called), it doesn't update the text in the datatable. I thought that.set(...) would perform this action. I checked and I am passing the correct parameters, but the datatable doesn't render the update in the cell when the drop-down goes away. Any thoughts?

create: function (conf) {
conf._enabled = true;
var that = this;
let selectElement = $('<select>',{name:'test', style:'display: inline'});
vendors.forEach((vendor)=>{
selectElement.append($(<option value=${vendor.id}>${vendor.name}</option>));
});
selectElement.on('blur',(e)=>{
console.log('select blur');
that.set(conf.name, e.target.value);
return false;
})
conf._input = selectElement;
conf._input.id = Editor.safeId(conf.id);
return conf._input;
},

ericlevy

I should also mention, I am not using a server, this is in the browser and I am managing the data in the client rather than connecting it to a server.

allan

it doesn't update the text in the datatable. I thought that.set(...) would perform this action

No - that sets the value in the form. i.e. think of it like inputElement.value = '123'; - or in jQuery terms input.val('123');.

The is only saved to the table when you submit the form.

There is a Select2 integration plugin for Editor.

That said, I'm in the process of adding an auto complete field type directly into Editor core, with full support in our server-side libraries. That will be part of Editor 2.4 which I plan to ship fairly soon (end of next week or early Dec). It might be something of interest.

Allan

ericlevy

I'm sorry I shouldn't call it select2 as this is confusing with the select2 library. It's more like 'custom_select'. I think my code is really close to working. I don't need the auto complete, just the dynamic population of the select options based on the line.

Can you help me with what I need to do with inline editing to save it back to the table? I am not sure I understand "form submission" with inline editing. Is there a function I need to call in this block to submit it back to the datatable and render the update? Should I remove that.set(...) in this code block also then?

selectElement.on('blur',(e)=>{
console.log('select blur');
that.set(conf.name, e.target.value);
return false;
})

Thanks!
Eric

allan

Hi Eric,

Are you able to link to a demo of what you've got at the moment.

I don't need the auto complete, just the dynamic population of the select options based on the line.

Most of the multi-option field types offer an update() method - field().update(), which, when called will set the options available for that field.

If the options can change per row, then on initEdit the options should be set (updated) based on the row.

Allan