Swipe action of Radlistview

Thread is closed for posting
3 posts, 1 answers
  1. Dynamic
    Dynamic avatar
    4 posts
    Member since:
    Dec 2005

    Posted 13 Sep 2017 Link to this post

    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>

    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. Answer
    Nikolay Iliev
    Nikolay Iliev avatar
    351 posts

    Posted 13 Sep 2017 Link to this post

    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>

    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.

    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. Dynamic
    Dynamic avatar
    4 posts
    Member since:
    Dec 2005

    Posted 15 Sep 2017 Link to this post

    Thank u so much for your answer.

    It was really helpfull.

Back to Top