Inline editor with multiple select fields
Inline editor with multiple select fields
avcarrillo
Posts: 15Questions: 2Answers: 0
I have been unable to get multiple select fields working using the inline editor. It works fine with the pop out form.
I was having a problem just getting a single field to work, but found a workaround on the tech notes http://datatables.net/manual/tech-notes/11, but this example only shows how to make a single select field work, not with multiple. Also, this documentation makes note about using the editField, which I believe would resolve my issues, but it says you need Editor 1.4 or newer. I only see 1.3.3 available for download. Is this a typo, or just not released yet?
Any help would be appreciated. Below is my code. I will post the server generated json in a separate comment
HTML:
<table cellpadding="0" cellspacing="0" border="0" class="display"
id="Parts" width="100%">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Category</th>
<th>Vendor</th>
<th>Name</th>
</tr>
</thead>
</table>
table.js
function buildDropDownList(list) {
var api = list+".json";
//var options = [];
var options = new Array();
$.ajax({
type : "GET",
processData : false,
async : false,
url : api,
dataType : "json",
success : function(data) {
$.each(data, function(key, values) {
$.each(values, function(val, select) {
options.push({
value : select.id,
label : select.name
});
});
});
}
});
console.log(options);
return options;
}
/*
* Editor client script for DB table Category
* Automatically generated by http://editor.datatables.net/generator
*/
(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
"ajax": "parts.js",
"table": "#Parts",
"fields": [
{
"label": "id",
"name": "id",
"default": "",
"type" : "hidden"
},
{
"label": "Category",
"name": "category.id",
"type": "select",
"ipOpts": buildDropDownList("categories")
},
{
"label": "Vendor",
"name": "vendor.id",
"type": "select",
"ipOpts": buildDropDownList("vendors")
},
{
"label": "Name",
"name": "name",
"default": "Test",
}
]
} );
$('#Parts').on('click', 'tbody td:not(:first-child)', function(e) {
//editor.inline( $('#Parts tbody tr:first-child td:last-child'), 'category.id' );
editor.inline( this, 'category.id', {
submitOnBlur: true
} );
});
$('#Parts').dataTable( {
"dom": "Tfrtip",
"ajax": "parts.json",
"columns": [
{"data" : null, "defaultContent": '', "orderable": false, "width" : "20px"},
{"data" : "id", "visible" : false, "searchable" : false},
{
"data" : "category.name",
"editField" : "category.id"
},
{
"data" : "vendor.name",
"editField" : "vendor.id"
},
{
"data": "name"
}
],
"tableTools": {
"sRowSelect": "os",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
} );
}(jQuery));
This question has an accepted answers - jump to answer
Answers
parts.json
categories.json
vendors.json
Inline editing in Editor will display only one field at a time, so you would need to create a plug-in field type that implements the multi-select in a single field.
The other option to consider is using Bubble editing which is similar to inline editing, but allows multiple fields to be shown.
Allan
Hi Allan,
Do you ever sleep? :)
I don't need to display more then one dropdown at a time, but I do need to be able to update each one separately. IE click the category dropdown and change it, then click on the vendor and change it.
Does that make sense?
Thank you
I've got a 1 year old baby. Does that answer the question? ;-)
I think I understand, but it still means two fields in the same cell does it not? You need to modify one and then trigger the other. I guess you could potentially use the API to listen for the submit from the category and then immediately edit in the same cell the vendor based on the new information (since Editor will let you edit any data in any cell for the row). Not ideal, and bubble editing would probably be a lot easier since you already have the continuation working, but it would probably work.
Allan
It's not two fields in the same cell, it's two different fields in the same row. Or am I misunderstanding the meaning of a cell? In the example above I have <td>category (dropdown)</td><td>Vendor (dropdown)</td>
I tried switching to bubble editor using
But now I'm getting the error:
Uncaught Unable to automatically determine field from source. Please specify the field name
When I click on either dropdown. The Name field works as expected, the same as with inline.
Hope this is clearer. Sorry I don't have a working example for you. I tried live.datatables.net, but there is no editor plugin (or I just couldn't figure out how to make it work)
Thank you
cellas in atdorthelement was my meaning.With inline editing you can edit one field at a time only. So you would update the category first, submit that and then update the vendor in this case.
For bubble editing, you probably need to specify the fields to edit using the
bubble()method's second parameter.Allan
Ok, I have not made my issue clear. I apologize for that.
The problem is I can only get one of the dropdowns to work and not the other. I have to separate dropdowns, one for Category, and one for Vendor. By clicking on either of them I get the error "Please specify the field name".
By using this fix
I am able to get the Category dropdown to work, but not the Vendor dropdown which again is a separate cell.
As a workflow I would visit the page and update the vendor only. With the current fix I am unable to do that.
I hope that clears up the confusion.
Thank you Allan
I'm sure there is a better way of addressing this issue, but I came up with a workaround by using the following
The last question I have is in regards to editField which is referenced on http://datatables.net/manual/tech-notes/11. Do you need Editor 1.4 or higher, and if so when will 1.4 be released.
Thank you
Hi,
Thanks for the clarification - I completely misunderstood! Sorry.
Good to hear you have a workaround - yes its a bit of a pain at the moment, which is why Editor 1.4. will address that. It should be available at the start of December, although I'm happy to send you a dev copy just now if you would like to use that feature as it has already been implemented.
Regards,
Allan
Yes please.
Thank you Allan
Sent :-).