Images in modal window

agnitio

I'd like to show some images in Editor's popup modal window.
However, rather than pre-loading these images, I'd like to do so only once
the "Edit" button has been clicked.

agnitio

To clarify, I have a list of items in a DataTable. I highlight one the items, then click "Edit".
Based on one the attributes of that item (SKU, which is the value in column one), I want to then retrieve a set of images based on the SKU value.

allan

To confirm, you want the images to be part of one of the fields? In which case you'd need to have a custom field type plug-in which does what you are looking for. There is a tutorial on creating plug-ins here: https://editor.datatables.net/tutorials/field_types .

Showing images should hopefully be relatively simple, but please do ask if you have any questions!

Thanks,
Allan

agnitio

Hi Allan,

Thank you for replying so quickly :-) I eventually figured out that I needed to create a new, custom fieldType, so made one called 'thumbs':

[code]
$.fn.DataTable.Editor.fieldTypes.thumbs = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {
"create": function ( conf ) {
var that = this;

// Create the thumbs element
conf._input = $('')[0];
return conf._input;
}
});
[/code]

I also have some code which triggers when the "Edit" button is clicked:

[code]
editor.on('onInitEdit', function (json, data) {
var sData = oTable.fnGetData(this.s.editRow);
$('.thumbs').empty();
$('.thumbs').append('');
});
[/code]

This shows the required image in the modal, although I have to open & close it once for it to start working. Ultimately, once I get one image working, I'd like to cycle through sData.images (which is an array) and display those.

agnitio

In fact, the issue I have is that I cannot set the array of images in each row (which is then passed to sData). The array is returned in aaData ( ie, aaData[0]['thumbs'] ) but how do I go about extracting that? It seems awfully expensive to iterate through each and every element of aaData to find where sData.sku = aaData[]['sku'] , and then return the 'thumbs' part. There must be a smarter way to do it, presumably sending the thumbs in aoColumns, with something like bVisible as hidden, rather than false (if that makes sense!)

allan

What does the data for each row look like? Something like this:

[code]
{
"thumbs": [
"thumb1.png",
"thumb2.png",
...
],
...
}
[/code]

?

If so, you can use the `name` parameter of the Editor field set to `thumbs` and the array will be what is given to the `set` function of the field type plug-in.

It doesn't even need to be in a column (the bVisible you mention) - the whole data source object for the row is given to Editor when it shows an edit screen.

Allan

agnitio

Hello Allan & thanks for all your help thus far. Taking your advice, I have gotten to the point of displaying the thumbnails via the "set" function in the field type:

[code]
$.fn.DataTable.Editor.fieldTypes.thumbs = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {
"create": function ( conf ) {
var that = this;

// Create the thumbs element
conf._input = $('')[0];
return conf._input;
},
"set": function ( conf, val ) {
$.each(val, function(index, image) {
$('.thumbs').append('');
})
}
});
[/code]

However, as before, it doesn't show the first time I click "Edit". I have also tried adding the following:

[code]
editor.on(
'onInitEdit', function (json, data) {
var sData = oTable.fnGetData(this.s.editRow);
$('.thumbs').empty();
$.each(sData.thumbs, function(index, image) {
$('.thumbs').append('');
})
});
[/code]

It feels like I'm almost there!

agnitio

Would it be that I need to call 'set' from within 'create'? If so, how do I pass the thumbs through to it, as I seem to only have conf & this accessible within 'create'.