MIS 3200 – Unit 5.3 Manipulating ListItem controls – Moving ListItems between ListItem controls – Removing ListItems from ListItem controls

Moving ListItems between Listboxes Assume we have created a ListBox called lbMenu which looks like this: And the source view of lbMenu might look like this:

Moving ListItems #2 With a 2 nd listbox and a couple of buttons we easily move ListItems from one ListBox to another: in the picture above, the 2 nd ListBox source looks like this

Moving ListItems #3 Using a for loop to help us identify which items are selected, we can Add ListItems to our 2 nd ListBox: This says to ADD a ListItem to the Items collection of lbSelected. ListItems are added to the end of the collection.

Removing ListItems from a ListBox If we want to remove items that have been selected, we will use a 2 nd for loop to Remove selected ListItems from to our 1 st ListBox: This says to remove a specific ListItem from the Items collection of lbMenu. In this case the item is the one referenced in lbSelected.

Un-selecting ListItems Notice how the items we added on the previous slide remained selected? If we want to un-select the newly added items, we need to set the SelectedIndex of our 2 nd Listbox to -1 at the end of the method

Moving ListItems to Select into a new Box

Reversing the process What if we would like to allow the customer to change their mind?

Reversing the process #2 Remember – this approach only works when a list item can be in only one list box at a time

Accumulating all items If we want to show a total, (just like what we did in Unit 5.2) we can use a for loop to identify ALL items in the “Selected Items” ListBox:

Accumulating all items #2 Notice how we removed the if statement from 5.2 – we do not care if the item is selected or not, we already know they want it so we must add up everything in the “Selected Items” ListBox

Time to try it out – Unit 5 L2.2 Moving and deleting ListBox items 1.Copy your U5L2 assignment and paste it in the Unit 5 as lastnameU5L22.aspx 2.Add two buttons which will emulate the example from the beginning of this Unit 1.One button will perform the Select functionality 2.One button will perform the Remove functionality 3.Add a 2 nd ListBox which will hold the selected fees 1.Set the SelectionMode to Multiple 2.Set the Rows to 5

L2.2 #2 4.The user should be able to select fees and remove fees just like the previous example (see slides 7 & 9) 5.Modify the Calculate button method so that the fees are added up based on any fee in the 2 nd listbox (it does not matter if they are selected or not, the fact that they are in the “Selected Items” ListBox means it should be reflected in the total) 6.After the Calculate button is pressed, reset the selected fees (the fees do not have to be in any particular order, but all fees must be removed from the selected fees ListBox and moved back into the 1 st ListBox)

L2.2 #3 7.Modify your heading to reflect this is Unit 5 L2.2 (instead of L2) 8.Add appropriate comments to explain what the methods are doing 9.Create a link to your U5L2.2 page from your MIS3200 page and copy everything to ASPNET and submit your MIS Portfolio URL to the drop box.

Think About It! With 2 ListBoxes, adding and removing selected items from one to another can really improve the usability of our page. Using the “select” and “remove” buttons gets us closer to expected checkout functionality.