asked on February 29, 2024
Is it possible to show images for each row in a separate column next to the row keys? We have images that are served by backend and the links are generated from row ids. It would be ideal if images can be obtained just from links somehow but if not can we just supply base64 strings which will be converted to images by flexmonster?
⋅ March 1, 2024
Hello,
Thank you for reaching out to us.
We recommend adding the column containing the base64 strings to the dataset. Then, you can display those images using the customizeCell API call. For example, the "Image" field contains base64 strings:
function customizeCellFunction(cell, data) {
if (!(data.hierarchy && data.hierarchy.uniqueName == "Image")) return;
let newText =
`<img src='data:image/png;base64, ${cell.text}'/>`;
if (data && data.type == "value" && data.label != "") {
cell.text = newText;
}
}
You are welcome to check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/crnbs8qa/
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ March 4, 2024
We tried doing that but somehow cell.text is not set correctly (see the screenshot). However, we are interested to show images in the already aggregated state, not with
options: {
grid: {
type: "flat"
}
}
We named the field "structureimage", verified that base64 string there is correct using online tools to convert base64 to image.
⋅ March 5, 2024
Hello,
Thank you for the details of your use case.
Kindly note that the base64 string should be placed in the <img> HTML tag, for example:
function customizeCellFunction(cell, data) {
if (!(data.hierarchy && data.hierarchy.uniqueName == "Image")) return;
if (data && data.type == "header" && data.label != "") {
let base64Img;
cell.addClass("fm-custom-cell");
if (data.expanded) {
base64Img = `<i class="fm-icon fm-expanded-icon" title="Click to collapse"></i>
<img src='data:image/png;base64, ${data.label}'/>`;
} else {
base64Img = `<i class="fm-icon fm-collapsed-icon" title="Click to expand"></i>
<img src='data:image/png;base64, ${data.label}'/>`;
}
cell.text = `<div style="display:flex; align-items:center; font-size:12px; position:relative;">
${base64Img}</div>`;
}
}
Feel free to check the following example: https://jsfiddle.net/flexmonster/2z6nk4dr/
Please let us know if our answer was helpful. Looking forward to hearing your feedback.
Kind regards,
Nadia
⋅ March 5, 2024
Hi,
We tried that and now it is showing the base64 string in the end but still no image.
Nikita
⋅ March 6, 2024
Hello,
Thank you for the response.
Could you please modify the JSFiddle from the previous answer to show us the issue? Also, where do you want to place the images:
It would greatly help us.
Looking forward to hearing from you.
Kind regards,
Nadia
⋅ March 6, 2024
We found the issue: needed to remove this part from Flexmonster settings:
options: {
grid: {
type: "flat"
}
}
And then rows should be expanded to see the structures since we had [{ uniqueName: entitycol.label.toLowerCase() }, { uniqueName: "structureimage" }] in rows. Images are shown now when each individual row is expanded although we would prefer to show it side by side somehow in an already aggregated view as a separate column instead, but the current way may work for us (need to discuss with others also).
Thank you!
⋅ March 7, 2024
Hello,
Thank you for the response.
We are glad to hear that it works for you. Also, to show members side by side, you can use the "classic" grid layout:
options: {
grid: {
type: "classic"
}
}
Feel free to check our demo illustrating such a layout: https://www.flexmonster.com/demos/js/classic-view/
We hope it helps. You are welcome to contact us if other questions arise.
Kind regards,
Nadia