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

Swipe action of Radlistview

2 Answers 192 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.
Dynamic
Top achievements
Rank 1
Dynamic asked on 13 Sep 2017, 07:04 AM

Hello, I am using RAD list view in my app. On half-swipe action, usually it works fine when I show two buttons of "Ok" and "Cancel". But now I want to show only one button i.e. "Ok" when user half wsipes on a row of RAD listview. The "Ok" button is not occupying the complete width of two buttons. It shows empty area in place of second button.

I am showing one button using followig code:

 <StackLayout *tkListItemSwipeTemplate id="right-stack" orientation="horizontal" width="100%">
        <StackLayout class="delete-chat" id="btnDeletes" orientation="vertical" verticalAlignment="center" (tap)= "onLeftSwipeClick($event)">
                  <Label text="ok" class="swipetemplateLabel" textWrap="true" ></Label>
          </StackLayout>
  </StackLayout>

How can I remove that empty area and use the width of both buttons for "Ok" only?

It would be great if you can provide me solution for same.

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Nick Iliev
Telerik team
answered on 13 Sep 2017, 11:17 AM
Hi Roger,

The provided snippet shows only the usage of single swipe action for a Label with text "ok". I was not able to reproduce your scenario with the empty area as the posted code is not showing your entire implementation. In the lines below I am going to post some instructions on how to set the swipe limits no matter what swipe template you are using with the help of itemSwipeProgressChanged event.

You can use as a reference this sample(HTML file) and its code behind setup(Component file). In the linked example the methods onCellSwiping (callback for itemSwipeProgressChanged event) and onSwipeCellStarted (callback for itemSwipeProgressStarted event) are used to demonstrate how to assign swipe limits. This way you can set your own limits on up to where the user can swipe using the threshold property. Detailed description of this functionality is posted in this article section.

For example, let's assume that you need only left swipe action with a "OK" Label.
Using the same example as code base, I could introduce a Grid row with auto height (same as Stacklayout)
for my swipe template.
<GridLayout *tkListItemSwipeTemplate columns="auto, *" id="right-stack">
    <StackLayout col="0" class="markViewStackLayout" id="mark-view" (tap)="onLeftSwipeClick($event)">
        <Label text="OK" class="swipetemplateLabel" textWrap="true" verticalAlignment="center" horizontalAlignment="center"></Label>
    </StackLayout>
</GridLayout>

Then by using the cell swiping event I can control the left swipe limit as done here and set the threshold as done here (to trigger the action when the swiped item passes a threshold).

Notice that the swipe limist are set with using getMeasurableWidth method which you can use to get the dimension of your StackLayout (in your setup with width="100%") and use the received value to assign the left (and/or right) swipe limits.


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.
0
Dynamic
Top achievements
Rank 1
answered on 15 Sep 2017, 05:18 AM

Thank u so much for your answer.

It was really helpfull.

Tags
ListView
Asked by
Dynamic
Top achievements
Rank 1
Answers by
Nick Iliev
Telerik team
Dynamic
Top achievements
Rank 1
Share this question
or