This is a migrated thread and some comments may be shown as answers.

IOS-Item reorder does not work with HtmlView

2 Answers 67 Views
ListView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Anurag
Top achievements
Rank 1
Anurag asked on 21 Aug 2017, 09:43 AM

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 Answers, 1 is accepted

Sort by
0
Nikolay Tsonev
Telerik team
answered on 21 Aug 2017, 11:29 AM
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.
0
Anurag
Top achievements
Rank 1
answered on 21 Aug 2017, 12:03 PM
Thanks Nikolay. Your suggestion worked. I can confirm that the reorder now works on IOS.
Tags
ListView
Asked by
Anurag
Top achievements
Rank 1
Answers by
Nikolay Tsonev
Telerik team
Anurag
Top achievements
Rank 1
Share this question
or