RadListView image display bug in IOS

8 posts, 0 answers
  1. Miklos
    Miklos avatar
    6 posts
    Member since:
    Aug 2017

    Posted 12 Sep Link to this post

    Hi!

    I use Nativescript angular version and get image path from api.

    Insert to RadlistView but the image dont show correct. This video show what is the problem: https://youtu.be/vv2dwh1p0VE

    Why disable or remove image out of display and why download again when image is in the screen again? I remove loadMode asyn but the problem not solved.

    Thank you for your help

    <RadListView [items]="dataItems" height="100%">
    <ng-template tkListItemTemplate let-item="item">
    <StackLayout class="list-group-item list-item-template-style">
    <Image class="list-newcatalog-photo"
    [src]="item.imageUrl"
    loadMode="async"
    width="100%"></Image>
    </StackLayout>
    </ng-template>
    <ListViewLinearLayout
    tkListViewLayout
    scrollDirection="Vertical"
    spanCount="1"></ListViewLinearLayout>
    </RadListView>

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 13 Sep Link to this post

    Hi Miklos,

    Thank you for your interest in NativeScript!
    The video link you have provided is not working (YouTube opening the link with "This video is not available") so I was not able to fully understand and reproduce the issue. Can you please provide a working link and/or sample project to demonstrate the issue (you can archive the project with deleted node_modules and platforms folder).

    Bear in mind that loadSync property is working for Android only (makes no difference on iOS) and it aims to prevent the UI from freezing when larger images are loaded.


    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Miklos
    Miklos avatar
    6 posts
    Member since:
    Aug 2017

    Posted 13 Sep in reply to Nikolay Iliev Link to this post

    My video link was not public. Sorry I fixed this.

    https://youtu.be/vv2dwh1p0VE

    I have this problem.

    Please help me.

    Thanx

     

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 13 Sep Link to this post

    Hello Miklos,

    On iOS behind RadListView and ListView stands UICollectionView which has the requirements that its cells must have a predefined size. This means that size can't be assigned dynamically (as in your case) and the RadListView must "know" the size of the image that will be loaded into the cell.

    One possible approach would be to create grids using GridLayout and specify the size of the row (or column) that will load the image from your online API source.

    e.g.
    <RadListView [items]="items" height="100%">
        <ng-template tkListItemTemplate let-item="item" let-i="index">
            <GridLayout rows="auto 300" class="list-group-item list-item-template-style">
                <Label row="0" [text]="i + 1" textWrap="true"></Label>
                <Image row="1" class="list-newcatalog-photo" [src]="item.imageUrl" loadAsync="true" ></Image>
            </GridLayout>
        </ng-template>
        <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" spanCount="1"></ListViewLinearLayout>
    </RadListView>

    With the above snippet, the image will be loaded in the second grid row (row="1") which has height value of 300dp (device independent pixels). This way the UICollectionView will "know" each cell size and load all images as expected.

    Demonstration application that shows this technique while using online API can be found here.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Miklos
    Miklos avatar
    6 posts
    Member since:
    Aug 2017

    Posted 15 Sep in reply to Nikolay Iliev Link to this post

    Hi!

    Have you got any idea how can I make list width screen width images?

    I want to zoom image in the list. Can I do this? Because the pinch example not working in list item.

    Lot of thanx

    Bumbella

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 15 Sep Link to this post

    Hi Miklos,

    You can create your list view item template to take all available space  (or a particular part of it) using different layouts. For example, you can use GridLayout and set the image column to have space of * (meaning take all available space)

    For example, the below snippet will create four equally sized boxes (each containing a label)
    <GridLayout rows="*, *" columns="*, *">
        <Label text="0, 0" row="0" col="0"></Label>
        <Label text="0, 1" row="0" col="1"></Label>
        <Label text="1, 0" row="1" col="0"></Label>
        <Label text="1, 1" row="1" col="1"></Label>
    </GridLayout>

    Using the above technique, you can set your item template and the image you are loading to be placed in a similar cell.

    Regarding the zoom functionality, it is not an out-of-the-box one, and you will need an implementation that can handle the scaling and translation of the elements you want to zoom in and out. I have recently ported an existing example to an Angular based application here. The demo application demonstrates how to zoom, drag and reset the state of an element so you might reuse it or even improve the implementation.


    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  7. Miklos
    Miklos avatar
    6 posts
    Member since:
    Aug 2017

    Posted 18 Sep in reply to Nikolay Iliev Link to this post

    Thank you for your lot of help.

    Can I disable list scrolling when I zoom image? Because this problem both platform

    IOS: https://youtu.be/rD0VuBql070

    Android: https://youtu.be/bbalz5HVCzM

    Thanx

  8. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    291 posts

    Posted 19 Sep Link to this post

    Hi Miklos,

    Thank you for writing us back.

    I reviewed your case, however, there is no functionality, which provides a way to disable the scroll of the ListView. Something that could help is using isUserInteractionEnabled and to set it to false. This will disable the interaction for the whole component. For example:

    <RadListView id="lvid" row="1" [items]="dataItems" isUserInteractionEnabled="false">
            <ng-template tkListItemTemplate let-item="item">
                <StackLayout orientation="vertical">
                    <Label class="nameLabel" [text]="item.name"></Label>
                    <Label class="descriptionLabel" [text]="item.description"></Label>
                </StackLayout>
            </ng-template>
        </RadListView>


    Bear in mind that this property will also affect the child components and could disable the gestures 

    Regards,
    nikolay.tsonev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top