IOS-Item reorder does not work with HtmlView

3 posts, 0 answers
  1. Anurag
    Anurag avatar
    27 posts
    Member since:
    Apr 2016

    Posted 21 Aug Link to this post

    I find that the item reordering functionality does not work on IOS when I am using an HtmlView inside the RadlistView. On android the reordering works perfectly.

    Here is my sample code

    <RadListView id="listView" [items]="viewCollection" (setupItemView)="onSetupItemView($event)" itemReorder="true" swipeActions="true" (itemReordered)="onItemReordered($event)" multipleSelection=false (itemSwipeProgressStarted)="onSwipeCellStarted($event)" (itemSwipeProgressChanged)="onCellSwiping($event)" (itemSwipeProgressEnded)="onSwipeCellFinished($event)">
        <ng-template tkListItemTemplate let-item="item" let-i="index">
            <StackLayout backgroundColor="white" class="list-group-item">
                <StackLayout *ngIf="item.Type ==='a'">
                    <StackLayout rows="auto auto auto auto" columns="2* 18* 7*">                           
                        <HtmlView html="<span><h1>HtmlView demo in <font color='blue' face='lato'>NativeScript</font> App</h1></span>" class="search-text m-y-5" row="0" col="1" colSpan="2" textWrap="true"></HtmlView>
                    </StackLayout>
                </StackLayout>
        </ng-template>
        <!--For the changes-->
        <GridLayout *tkListItemSwipeTemplate columns="* *" class="listItemSwipeGridLayout" height="100%">
            <StackLayout id="mark-view" class="markViewStackLayout" col="0" (tap)="onLeftSwipeClick($event)" height="100%" verticalAlignment="center">
                <Label text="Undo" horizontalAlignment="center"></Label>
            </StackLayout>
            <StackLayout id="delete-view" class="deleteViewStackLayout" col="1" (tap)="onRightSwipeClick($event)" height="100%" verticalAlignment="center">
                <Label text="Delete" horizontalAlignment="center"></Label>
            </StackLayout>
        </GridLayout>
    </RadListView>
  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 21 Aug Link to this post

    Hello Anurag,

    Thank you for contacting us,
    I reviewed your case and found that the HTML view is consuming the event and to be able to use the RadListView reordering option I could suggest using the property
    isUserInteractionEnabled="false"
    and to set it up to false for the HtmlView. This allows the event to be handled by the ListView and You will be able to reorder the items. For your convenience, I am attaching a sample project, where the needed changes are made and GIF file from the simulator, where the final result is shown.

    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.
  3. Anurag
    Anurag avatar
    27 posts
    Member since:
    Apr 2016

    Posted 21 Aug in reply to nikolay.tsonev Link to this post

    Thanks Nikolay. Your suggestion worked. I can confirm that the reorder now works on IOS.
Back to Top