display object in a select list and inline editing

mikeosoft

Hi,
I have a select list which I populate with tuples of (label / value).

The editor field in question is defined as following :

label: "Account", 
name: "glAccountJson",
type: "select",
options: [{"label":"Desc1", "id":1}, {"label":"Desc2", "id":2}], 
optionsPair: { label: 'label', value: 'id' }

The dataTable column is defined as following :

data: "glAccountJson", className: "account"

When the table is first displayed, the cell text is [object Object].
If I click in the cell, the select list appear and the choices are displayed. I choose an element, then press enter, but the displayed text is the value id instead of the label.

I also tried to use the postEdit event to write the correct value with (simplified) :

editor.on( 'postEdit', function (e, json, data ) {
    editor.set('glAccountJson', {"label":"Desc1", "id":1} );
    editor.submit();
});

But it also writes the id value in the cell.
I thought the dataTable was able to use the tuple by itself?

Thank you

mikeosoft

Here is a test case
http://live.datatables.net/qodilizi/1/

allan

Use:

data: "glAccountJson.label"

in your DataTable configuration and:

name: "glAccountJson.id"`

for Editor. You want to display the label and edit the id, hence the reasoning for this.

This example should be of some use.

Allan

mikeosoft

Hi Allan,

Yes I tried that already, but then the dropdown is not showing anymore when I click the cell.

http://live.datatables.net/qodilizi/2/

mikeosoft

It gives this error : Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11

I already got this error while working on this issue and I found that if I set the editor field the same as the datatable field, it kind of work but it does some strange stuff with the data along the path.

kthorngren

You might need to use the columns.editField option. Something like this in your DT column config for that field:
editField: 'glAccountJson.id'

Kevin

mikeosoft

Thank you Kevin for your input. The select list has indeed reappeared upon clicking the cell. But now, selecting a different option does nothing. The old value still persist

allan

Right - so the problem now is that Editor is changing the id, but it doesn't really know anything about the label. When submitting to a server a left join would be used to get that joined information and ensure everything is in sync.

Since you are using local table editing, you don't have the luxury of letting the server do the hard work for you . You need to also update the label when the value is changed.

I've put a little example of local table editing with joined information (based on my join example) together here: http://live.datatables.net/layonado/2/edit .

Allan

mikeosoft

Hi Allan,
Thank you for your reply. It works for form editing, but not for inline editing.

With inline, when I select an option, it changes the value of the label column, but the select cell is still showing the id value.
If I uncomment the hidden columns, if I click the cell, the cell become blank and there is no select list.

http://live.datatables.net/layonado/8/

mikeosoft

I managed to make it work using postEdit and replacing the cell value. It's not elegant but it works. Is there a better solution?

Thanks