Swipe to Edit/Delete items using the grid system

ionic-v1
1

Hello everyone!

I’ve been trying to find a way to use the swipe event to edit/delete items (rows) using the grid system

I found this codepen: http://codepen.io/anon/pen/ogQMQV

but it’s for a list of items and I need more than one value per line.

So I’m basically trying to do the exactly same thing as showed in the codepen, but using the grid system instead.

Any ideas? Thanks!

2

Hi,

Are you looking for a implementation similar to this - http://codepen.io/monugt/pen/raQZwo

Please do share your views.

1 Like
3

Hello @monugt thanks for your answer!

Basically, I wanted to use the built-in swipe function but I was only using the grid system.

So I saw your codepen and wrapped the grid into a ion-item and ion-list and added the buttons.

Something like this:

      <ion-list>
            <ion-item>
                <div class="row">
                    <div class="col">
                       FOO
                    </div>
                    <div class="col">
                      BAR
                    </div>
                </div>
                <ion-option-button class="class1">
                    Edit
                </ion-option-button>
                <ion-option-button class="class2">
                    Delete
                </ion-option-button>
            </ion-item>
        </ion-list>

Of course, these are static data but I was tweeking things out and it worked (I’m not sure if it’s a good solution though)

4

Hi @drodrigo,

By using ion-list we can utilize actual swipe effect on row which is build in by ionic framework.

However, using swipe function also we can achieve it but it would require animation styling.

Also, performance wise ion-list will be helpful along with ng-repeat. It works perfectly with directives which are rendered using ng-repeat for each row.

Thank you.

1 Like