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.