Inline Edit w/ Select Field and Update Image In Another Field

icefield

My table has two columns Name and Image. Name is inline editable, and I want to update the image corresponding with that name in the neighboring image column.

To update the image column, I'm using the following javascript:

            {
                data: 'Category._idImage',
                width: '20%',
                render: function (data, type) {
                    if (typeof data !== 'undefined') {
                        if (data !== 0  &&  data !== '0'  &&  data !== null) {
                            let file = editorCategory.file('UploadedFileMembers', data);
                            if (file) {
                                return type === 'display' ? '<img width="64" src="' + file.webPath + '" />' : file.fileName;
                            }
                        }
                    }
                    return 'No image';
                }
            },

where editorCategory is the inline editor (Select Type) used to change the name (as shown below):

        fields: [
        {
            label: 'Category:',
            name: 'Event._idCategory',
            type: 'select'
        }]

I'm getting an exception thrown in dataTables.editor.js in the _api_file method (line 132 for version 1.9 of the Editor). The table in that method has information on the prior image, but not the new image associated with the new category selected from the Name column.

If I refresh the page after inline editing the Name to a different category, the correct image is retrieved and drawn.

How can I trigger things so that the table variable in the dataTables.editor.js reloads the corresponding data from my UploadedFileMembers table on an inline edit change to the Name field? Couldn't find a similar example.

colin

Hi @icefield ,

I'm not entirely following but it's worth pointing out that columns.render is only called when the cell is first drawn - it wouldn't be redrawn based on an edit in the neighbouring cell. You probably want to look at rowCallback, which is called on every draw.

Hope that helps; if not, please can you give more details, please.

Cheers,

Colin

icefield

The render on the neighboring Image cell is in fact being called after the inline edit to the Name cell.

I've included an additional image below to hopefully clarify things. Based on the item selected in the Name field, I want to draw a unique image that is associated with each name.

So, in essence, when changing the Name field, I'm trying to draw new image in the Image field.

The Image render function is being called after the inline edit of Name, but the assertion noted in original post is being thrown when the editorCategory.file('UploadedFileMembers', data) method is called.

Hope this is somewhat clearer now. Gonna be hard for me to give you link to see running live as its internal development at the moment.

icefield

So, here is how I worked around this issue for anyone that gets this far:

1) Add try/catch around editorCategory.file('UploadedFileMembers', data); call (see first image above). This handles the exception noted in initial post ( in dataTables.editor.js in the _api_file method (line 132 for version 1.9 of the Editor)).

2) Add postEdit event handler and refresh the table using ajax.reload() as follows:

editorCategory.on('postEdit', function() {
    categoryDataTable.ajax.reload();
} );