Hi,
I'm trying to show use the image grid component in the expandable row, but I'm not figure out which data source use.
I'm using the table to show all the product info, while I would show the product images in the expandable rows.
If I try to use the table, it goes to a circle dependency issue.
Using the same query that generates the table (the images are returned from the same query used in the table) it doesn't work.
Thanks,
Andrea
Anyone can help with this?
If you want to use same query, you should use ri[0] to retrive the image
Expandable row is something like nested listview
Thanks @AnsonHwang and @edurmush
I started trying using a single image component with {{products_list2.data.image[ri[0]]}} as source but it's printing the image only in the first row.
Also tried changing ri and i but nothing changed.
Looking at image1 state only the first contains the image in src.
Same with {{currentRow.image}}.
Also, it seems that the first image appears only if I click on the select button in the state, that it's empty when the page just loaded.
I need more details to help you. Can you share your query result and table? I can't imagine your scenario.
it's a known bug will fixed soon
Oh, ok I've fixed the row bug with this:
removing the Table's primary key option should serve as a workaround.
Now, trying with the image grid.
products_list2.data returns data like this
I tried this but it's not working.
I suppose it's some problem with the escaping.
I can force the image format from the query as necessary, but I didn't find the correct way (no brackets, single quote..)
Edit: also this it's not working:
This one seems working:
{{formatDataAsArray(products_list2.data)[ri[0]].image.replace(/[\[\]']/g, '').split(', ')}}
how about this one JSON.parse(formatDataAsArray(products_list2.data)[ri[0]].image)
Which should be the format returned by the query?
Is this ok?
"'https://xxxx/5a8c54ca135cfe04b1067d8373128be2.jpg','https://xxx/5a8c54ca135cfe04b1067d8373128be2.jpg'"
Ok, now it's really working:
{{formatDataAsArray(products_list2.data)[ri[0]].images.split(',').map(function(item) {
return 'https://xxxx/' + item.replace(/['"]/g, '') + '.jpg';
})}}
products_list2.data is
By the way, The images in the expandable rows are preloaded or are loaded when you expand the row?
it seem preload but render when click.
Is it possible to link each image to something (eg. bigger image resolution)?
But in this way, the link needs to be the same.
Can i use another link?
It depends on your data.
In your case you can do something like https://xxxx/{ item.replace(/['"]/g, '') }_1920_1080.jpg
If you store your images in different sizes.
We use cloudinary transformations, so you're right, I can simply concatenate it handler.
Many thanks!
