Getting autocomplete to work in Editor when mRender is used to bind object array

kahlil312

This is a follow up to my earlier discussion post in - http://datatables.net/forums/discussion/comment/49176#Comment_49176

Most of my DT set up is similiar to the above post, so for brevity sake -

Editor:
[code]
editor = new $.fn.dataTable.Editor({
...
...

"fields": [
{
Field1
},
{
"label": "Product:",
"name": "SelectedProductId",
"type": "autoComplete"
}

[/code]
Datatable:
[code]
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": '/Manufacturer/getSurveyDataViewModel?viewManufId=1',
success: function (jsonData) {

prodListSimple = getSimpleArray(jsonData.aaData.productDDList, 'ProductId', 'ProductDescription');

$('#dTManufactSurveyData').dataTable({
"sDom": "Tfrtip",
"aaData": jsonData.aaData.manufSurvData
[
{ },
{ },
{ },
{ "mData": "SelectedProductId", "aTargets": [1], "mRender": function (data, type, row) {
return prodListSimple[data];
}
});
},
],
"oTableTools": {
},
"fnInitComplete": function () {
editor.field('SelectedProductId').update($.map(prodListSimple, function (val, key) {
return { "label": val, "value": key };
}));

//generates a simpler id=value array object that is consumable by DataTables.
function getSimpleArray(jsonObjArray, idCol, nameCol) {
var simpleList = {};
$.each(jsonObjArray, function () {
var id = this[idCol];
var name = this[nameCol];
simpleList[id] = name;
});
return simpleList;
}
[/code]
The above (probably obviously) does not work with a JS error "TypeError: editor.field(...).update is not a function...
Would the above set up work even or do I need to retool this again to get autocomplete to work?

In my naivety I assumed Autocomplete would just "slot" into my existing set up however on reviewing the sample realised that the array format expected was again different, or somewhere my configuration is incorrect.
hope for some help
Update : datatables debug code : utacit
kG

allan

There is no `update` function in the AutoComplete plug-in, which is why you are getting the error you are. Additionally, the array syntax is different because AutoComplete comes from jQuery UI and is not part of Editor, so the syntax and API in general is a little different. The Editor plug-in for AutoComplete is a lightweight wrapper around AutoComplete, and it doesn't abstract all of the functionality because, inevitability, functionality would be lost if I did that.

Having said that, its actually fairly straight forward to update the data source using the jQuery UI AutoComplete API.

From their documentation ( http://api.jqueryui.com/autocomplete/#option-source ), the API needed is to set the `source` attribute:

[code]
$('#foo').autocomplete("option", { source: colors });
[/code]

So with the Editor plug-in you would do something like:

[code]
$( editor.field('SelectedProductId').node() ).autocomplete("option", { source: colors });
[/code]

i.e. get the `input` node for the field from the `node()` function which is available, and then use the AutoComplete's own API.

I hope this helps.

Regards,
Allan

kahlil312

Afraid I am all at sea at doing this - assume the above is pseudo code, makes perfect logical sense but syntax errors when trying to implement -
[code]
editor.field('SelectedProductId').node()).("option", { source: prodListSimple });
"SyntaxError: missing name after . operator"..

also tried
$(editor.field('SelectedProductId').node("option", { source: prodListSimple }));

some success with this hard-coded array but now have to figure how to add the actual name value array -
$(editor.field('SelectedProductId').node()).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );

this for some reason doesn't work
$(editor.field('SelectedProductId').node()).autocomplete( "option", "source", prodListSimple );
[/code]
Plus the selected value now shows as the id number i.e. '78' not the text anymore.

I guess I don't understand the syntax basics well enough to attempt this and was too naive with my understanding of how editor and autocomplete work together :(
i suppose there is no easier way to do this i.e. accessing the class parameters of the drop down directly & then apply a jquery plugin?

starting to tear hair out here having come this far and stymied at one of the last hurdle!

allan

Sorry - it wasn't meant to be pseudo code, but I did have an error in the code - it should be:

[code]
$( editor.field('SelectedProductId').node() ).autocomplete("option", { source: colors });
[/code]

Probably the only option you didn't try there!

Breaking it down a little more so it makes more sense:

[code]
var input = editor.field('SelectedProductId').node();
$( input ).autocomplete("option", { source: colors });
[/code]


Regards,
Allan

kahlil312

Correct syntax is therefore
$(editor.field('SelectedProductId').node()).autocomplete("option", { source: array});

I can't get this working yet, but this probably has something to do with the array format I am guessing.

I also have the problem where when the edit button is clicked, the bound autocomplete textbox now shows the id number rather than the text.

this is probably due to the mdata rendering thus to show the selected value on the Datatable:
[code]
{ "mData": "SelectedProductId", "aTargets": [1], "mRender": function (data, type, row) {
return prodListSimple[data];
}
[/code]
what can I do here, prodListSimple[data] does return the text value so this cant be the issue surely.
do i now have to do an onchange to change the id back to text or is there an easier way.

allan

In autocomplete, just give it an array of the values that you want to have available, rather than label/value pairs.

Something like:

[code]
var data = $.map(prodListSimple, function (val, key) {
return val;
} );
var input = editor.field('SelectedProductId').node();
$( input ).autocomplete("option", { source: data });
[/code]

At least, that's how I've used autocomplete in the past. It might have more advanced options to send values which are different from the display data, but I'm not aware of them.

> this is probably due to the mdata rendering thus to show the selected value on the Datatable

I think more likely it is because you are telling it to use the selected product ID :-):

> "name": "SelectedProductId"

You can use `name` like a function for mRender to convert from the SelectedProductId to the value, but to be honest, it might be easier to modify the server-side code, to also return a `SelectedProductName` field.

Allan

kahlil312

[code]
var data = $.map(prodListSimple, function (val, key) {
return val;
});
[/code]
so the above would render the text, not Id as well obviously..that was one of the reasons for using label / value, also looking at this example http://www.codeproject.com/Articles/152558/jQuery-UI-Autocomplete-with-ID it is possible to include ID values in the autocomplete JSON and then capture this in the change event..

basically what I am getting at here is whether there is a reliable way to show the label and capture the ID and then post the ID back via the update/create Editor event. the above way is just one, however not sure how I'd actually post this back to the data object. Is there a way to append to the data object on Update/Create?

allan

It looks like you need to override the _renderItem function if you want to have jQuery UI autocomplete show custom options: http://jqueryui.com/autocomplete/#custom-data . So yes, from their documentation it is possible to use a label value pair.

Allan

burnchar

Allan, please send the Autocomplete/Editor plugin to me as well.

allan

Hi,

Available on the plug-ins page here: http://editor.datatables.net/fields/plugins along with a few others :-). The list should grow quite a bit once DT 1.10 and Editor 1.3 have been released (that's the plan at least...!)

Sorry I haven't replied to your latest email - will soon!

Allan