Implementing Add/Remove for 2 ListBoxes in Silverlight

Gareth posted on Tuesday, November 10, 2009

Hi all, I've got myself stuck on a problem in CSLA for Silverlight that I can't seem to get my head around.

I'm implementing the concept of two list boxes, the first containing items that have been selected, the second containing items that are available for selection. The contents of each are mutually exclusive.

There are Add and Remove buttons to move listitems between the two boxes, along with a Save and Cancel button. (See attached screen shot).

The two list boxes use a CSLA data provider to source the data. This works okay to load the initial values as you can see from the screen shot.

Clicking on Add executes the following code:

private void AddButton_Click(object sender, RoutedEventArgs e) {

var srce = availColourData.Data as Business.ProductColourList;

var dest = usedColourData.Data as Business.ProductColourList;

int index = AvailColorListBox.SelectedIndex;

if (index >= 0) {

   var item = srce[index];

   srce.Remove(item);

   dest.Add(item);

}}

.and that moves the selected item across to the other list box.

When I click on Save I want to save the items that are in the 'selected items' list box.

This is where my problem is, I can't work out how to do this.

My colour list business objects are defined as follows:

public partial class ProductColourList : BusinessListBase<ProductColourList, ProductColour>

public partial class ProductColour : BusinessBase<ProductColour>

Ideally I want to save all the 'selected items' in one go, not make a call through the layers each time.

Currently I'm getting an Update method not implemented error because I don't know where to implement my update method, having got all confused about how I should be doing this.

I've looked in the samples and I can't find anything similar. Has anyone implemented anything like this?

Cheers,

Gareth.

DancesWithBamboo replied on Tuesday, November 10, 2009

I haven't done this exact thing yet so take this for what it is worth. 

I would make only 1 BO list bound to both ListBoxes and have a "Selected" property on the ProductColour BO.  Then when you move it from list to list you simple flip the flag.  You can bind the visible property of your "Selected" list ListItems to this property and the "Unselected" list ListItems to the inverse of it.  When you Save, you just decide if it is an Insert/Update/Delete based on the flag. 

By the way, drag-and-drop would be nice between the 2 listboxes.

Cheers

Gareth replied on Monday, November 16, 2009

Ok, so I managed to bind 1 BO List to the GUI Listboxes using a Selected property to bind via a VisibilityConverter.
The items display and can be added and removed. However the non-Visible (collapsed) items still show up as a thin horizontal line in the Listbox. I assume its because the ListBoxItem is visible but the TextBlock inside is hidden. How can I change the Visibility of each ListBoxItem?

See attached code.