Upgrading a complex list

Hi all,
I’m updating an old ionic app to newer version of ionic. My old app has a list that had multiple columns of data (with different widths), allowed reordering and also had options (so I could swipe an item and hit a delete button).
It was done as follows:

<ion-content>
	<ion-scroll scrollY="true" style="height: 100%;">
		<ion-list reorder="true" (ionItemReorder)="reorderItems($event)">
			<ion-item-sliding *ngFor="let item of listOfItems">
			  <ion-item (click)="itemClicked(item)">
			  <ion-row>
				  <ion-col col-8>
					{{item.name}}
				  </ion-col>
				  <ion-col col-4>
					{{tem.code}}
				  </ion-col>
				</ion-row>
			  </ion-item>
			  <ion-item-options>
				<button ion-button color="danger" (click)="deleteItem(item.id)"><ion-icon name="trash"></ion-icon> Delete</button>
			  </ion-item-options>
			</ion-item-sliding>  
		</ion-list>
	</ion-scroll>
</ion-content>

I don’t know for sure if this was the right way to do it all, but it worked
I’ve got the “new” version close to working but I can’t get the column sizing to work. After a bit of googling perhaps my whole approach is now wrong: Does it make sense to use rows and cols in a list ? How should I be doing it ?

<ion-list>
	<ion-reorder-group disabled="false"(ionItemReorder)="reorderItems($event)">
		<ion-item-sliding *ngFor="let item of listOfItems">
		  <ion-item (click)="itemClicked(item)">
		  <ion-row>
			  <ion-col size="8">
				{{item.name}}
			  </ion-col>
			  <ion-col size="4">
				{{item.code}}
			  </ion-col>
			  
			</ion-row>
			<ion-reorder slot="end"></ion-reorder>
		  </ion-item>
		  <ion-item-options>
			<ion-button color="danger" (click)="deleteParticipant(participant.id)"><ion-icon name="trash"></ion-icon> Delete</ion-button>
		  </ion-item-options>
		</ion-item-sliding>
	</ion-reorder-group>
</ion-list>

I guess the I could wrap the existing ion-row in an ion-grid so the ion-cols make sense, but I just feel this is a bit of a square peg in a round hole…
Edit: Wrapping the row inside an ion-grid does work. Sizes are ok, resize still works and sliding item still shows up…

1 post - 1 participant

Read full topic