How to Use a Checkbox in a Clickable List

Ionic Framework ionic-v3
1

I am attempting to have a list of items where the user clicks the details and it opens an edit modal or they click a checkbox to mark it completed. I am struggling with how to separate the two click events. I have the following (trimmed down):

<ion-list>
<button ion-item *ngFor="let item of items" (click)="edit($event,item)">
  <ion-label>{{item.Name}}</ion-label>
  <ion-checkbox (click)="toggle($event,item)" item-right></ion-checkbox>
</button>
</ion-list>

As it is, it only fires the checkbox toggle() event and never the button click edit() event, no matter where I click on the item. That’s the opposite of what I had expected since the button is the wrapper element, but regardless, I would still only have 1 event and not 2. I have tried some other ideas, but haven’t found a solution. Does anyone know how I could accomplish this?

3 Likes
2

I would try to use a different UI pattern instead. Maybe something like sliding items?

3

I have the same problem. @HorseFly how did you end up solving this ? @mhartington I think this is a common use case.

4

I haven’t solved it. I compared using sliding items vs an action sheet instead. I ended up temporarily put in the sliding items in hopes that future releases might support my original functionality. I also agree that this is a common use case. While I find the sliding to be a neat feature on mobile devices, I feel the checkbox/click to edit is more desktop-friendly.

Another pattern that I tried was to use swipeleft and swiperight to do my delete/complete actions and then click the row to edit. This also did not work. I didn’t spend a lot of time on it, but it seems if the item is clickable, it can do nothing else.

5

just dont use ion-item and handle all the css yourself and you will be good to go @tonyawad88

1 Like
6

@aaronksaunders I am with you on that. It would’ve been nice if that was possible out of the box. I ended up using the ion-item but changing the css of the button that overlays the ion-item. it has a position absolute, so I set it’s left to say 80% and then added a tap event on the label.

<ion-item *ngFor="let item of standType.items" >
     <ion-icon name="leaf" darkgreen item-left></ion-icon>
     <ion-label (tap)="GoToRecipeDetails(item);" tappable>{{item.name}}
     </ion-label>
     <ion-checkbox red item-right [(ngModel)]="item.checked"
            (ionChange)="AddRemoveRecipeToFavorite(item,menuType.name);">
     </ion-checkbox>
</ion-item>
2 Likes
7

You can Use tow items, each item with a click method
like :

<ion-list *ngSwitchCase="'todo'" >
      <ion-item *ngFor="let intervention of ( listInterventions | interventionFilter : ['todo'])">
        <ion-row>
          <ion-col width-80 >
            <ion-item (click)="detail(intervention)">
              <div [style.color]="getPriorityStyle(intervention.int_priority)">{{getPriorityName(intervention.int_priority)}}</div>
              {{intervention.int_nom}} <br/>
              {{(intervention.int_client != null)? intervention.int_client.c_nom : "aucun"}}<br/>
              {{(intervention.int_client != null && intervention.int_client.c_adresse!= null)?  intervention.int_client.c_adresse.a_adresse+" "+intervention.int_client.c_adresse.a_code_postal+" "+intervention.int_client.c_adresse.a_ville : "aucune"}}<br/>
              {{getHeure(intervention)}}
            </ion-item>
          </ion-col>
          <ion-col width-20>
            <ion-item>
              <ion-checkbox item-right [(ngModel)]="intervention.done_checked"  (click)="checkedDone(intervention)"></ion-checkbox>
            </ion-item>
          </ion-col>

        </ion-row>
      </ion-item>

        </ion-list>
8 
        <ion-row>
            <ion-col col-2>
                <ion-item>
                    <ion-checkbox></ion-checkbox>
                </ion-item>
            </ion-col>
            <ion-col col-10>
                <ion-item>
                    <h3>{{notification.title_br}}</h3>
                </ion-item>
            </ion-col>
        </ion-row>
        
    </div>
</ion-list>
9

Not sure if it helps, but I faced a similar problem. I have a list with items which have
checkbox left
label at center
delete button right
The delete button click event was never triggered. Inspecting the generated html source I discovered that the ion-checkbox has inside a button with role “checkbox” which I suppose handles the click event for the checkbox. This button has a default width of 100% (inherited from class item-cover). Just overwrite this css class in the page css file like this:
.item-cover{
width: auto !important;
}
Then the checkbox can only be clicked on the box.
Maybe it is not a really clean solution, but it works.

2 Likes