issue with editor using type=select

gregmaertens

Hello,

I have an editor configured with a field as follows
[code]
...
{
"type": "select",
"label": "Event:",
"name": "event_id",
"dataProp": "event_id",
"ipOpts": update_event_list(false)
}
..
[/code]

The DataTables is defined as:
[code]
...
{ "mDataProp": "event_id",
"sWidth":"50%" ,
"fnRender": function ( o, val ) { return get_event_name_from_id(val); }
}
...
[/code]

The event_id is actually a UUID.
get_event_name_from_id() is a simple map to render the cell with a human friendly name.

update_event_list() builds the options with something like: [ {"label":"friendly text", "value":""}]

The issue is that editor.edit() when fetching the data from the table, will use the rendered value and not the original id.
As a result, when editing a row, the value doesn't show as selected.

As an alternative, I tried to use dataProp to select another hidden field in the table, but it works, obviously, only one way. After updating the field it's not reflected back in the table (one field in the editor would have to update 2 columns...).

What is the correct way to do so?

Thanks,
Greg

allan

Hi Greg,

The first thing to say is that you could use the bUseRendered option to have DataTables not overwrite the value in the table's data store. That way Editor will get the required value. However, as you say, this needs to be bi-directional. To this end, I would suggest not using fnRender - which is effectively deprecated as it is really rather limited.

So what I would recommend is that you use mDataProp as a function - see http://datatables.net/blog/Orthogonal_data . With this you can set up a little function for mDataProp that will return the get_event_name_from_id() result when DataTables requests the 'display' data (possibly also use that for filtering / sorting?), and simply return the id in all other cases. You'll also need a 'set' command which will take the value from Editor and update your data set.

Its a little bit missy this I admit, and you might not be massively amused by this in light my comment on your other question(!), but this is another area where Editor 1.2 will really improve upon 1.1... :-). Indeed, DataTables 1.9.3 as well, which will be released alongside Editor 1.2 (although a nightly is available with the new features on the download page).

In DataTables 1.9.3 there is now a 'mRender' option, and 'mData' (basically a renamed mDataProp - backwards compatible!) whereby you can set mData to the JSON property for your ID, and mRender can be used to render the display (i.e. you don't need to muck around with setting the value).

There is quite a lot to take in here I know, but if you read through the Orthogonal data blog post, hopefully that will help you understand how DataTables works with data.

Regards,
Allan

gregmaertens

Hi Allan,

thanks for the super fast response!
I am using now mDataProp as a function now. Works as advertised! Thanks!

BTW, when using the mDataProp as a function, how does it know which element to fetch from the data source.
i.e. I used to have "mDataProp":"event_id". I am fetching the data using Ajax.

Most likely it's written somewhere, but thought of asking the question directly here with my response.

Thanks!

allan

> BTW, when using the mDataProp as a function, how does it know which element to fetch from the data source.

You tell it :-). You would do something like:

[code]
return src.id;
[/code]

where 'src' is the data object for the whole row.

Basically giving mDataProp as a string is really a shortcut for that. So:

[code]
"mDataProp": "id"

// and

"mDataProp": function ( ... ) {
return src.id;
};
[/code]

are basically the same thing (although as a function it needs to deal with the 'set' condition as well - which is why mRender is so nice).

Allan

gregmaertens

thanks. I was missing the fact that 'src' (in your example) is initially loaded from the data source... makes sense.