TwoSelect User Control, Moving Items between ListBox Controls - Part 1

Sunday, October 26, 2008

This post will show you how to create TwoSelect User control, basically this control can be used in the scenario where you want to add Users to selected Group. Left side of the ListBox will contain the users which is not present in the group and right side of the ListBox contains the list of users already present in the group.

I have created this as a very Generic control which can be used in other scenarios other then this also. You can customize the Display Text, button captions, some behaviours of the ListBox of this Control.

Also you need to provide the DataSource for the ListBoxes as IDataReader.

This control is built in Visual Studio 2008 with Framework 3.5 sp1, but this can be used in Visual Studio 2005 or Framework 2.0 also.

Following are the list of properties which are exposed in this control with their Types

   1:  public ListItemCollection AddedItems

2:

   3:  public ListItemCollection AvailableItems

4:

   5:  public string AvailableItemText

6:

   7:  public string AddedItemsText

8:

   9:  public string AddAllItemsButtonText

10:

  11:  public string AddSelectedItemsButtonText

12:

  13:  public string RemoveSelectedItemButtonText

14:

  15:  public string RemoveAllItemsButtonText

16:

  17:  public ListSelectionMode AvailableListSelectionMode

18:

  19:  public ListSelectionMode AddedItemsListSelectionMode

20:

  21:  public IDataReader  DataSourceAvailable

22:

  23:  public IDataReader DataSourceAdded

24:

  25:  public string DataTextFieldAvailable

26:

  27:  public string DataValueFieldAvailable

28:

  29:  public string DataTextFieldAdded

30:

  31:  public string DataValueFieldAdded

On click of the 'Add' Button, I am adding the items in the ArrayList and then from ArrayList I am moving from Available Items List Box to Added Items ListBox.

Add OnClick


1:  /// <summary>
2:  /// Add all the selected items from the Available Items to the Added Items
3:  /// </summary>
4:  /// <param name="sender">The source of the event.</param>
5:  /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
6:  protected void btnAdd_Click(object sender, EventArgs e)
7:   {
8:   if (lstAvailable.SelectedIndex >= 0)
9:   {
10:   for (int i = 0; i < lstAvailable.Items.Count; i++)
11:   {
12:   if (lstAvailable.Items[i].Selected)
13:   {
14:   if (!arlList.Contains(lstAvailable.Items[i]))
15:   arlList.Add(lstAvailable.Items[i]);
16:   }
17:   }
18:   for (int i = 0; i < arlList.Count; i++)
19:   {
20:   if (!lstAdded.Items.Contains((ListItem)arlList[i]))
21:   lstAdded.Items.Add((ListItem)arlList[i]);
22:   lstAvailable.Items.Remove((ListItem)arlList[i]);
23:   }
24:   }
25:   }

On Click of 'Add All' I am first adding all the items from Available Items to Added Items ListBox, and then clearing all the items from the Available Items ListBox

Code Snippet


1:   /// <summary>
2:   /// Add all the items from the Available items to the Added Items
3:   /// </summary>
4:   /// <param name="sender">The source of the event.</param>
5:   /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
6:   protected void btnAddAll_Click(object sender, EventArgs e)
7:   {
8:   foreach (ListItem list in lstAvailable.Items)
9:   {
10:   lstAdded.Items.Add(list);
11:   }
12:   lstAvailable.Items.Clear();
13:   }

On click of the 'Remove' Button, I am adding the items in the ArrayList and then from ArrayList I am moving from Added Items List Box back to Available Items ListBox.

Code Snippet


1:   /// <summary>
2:   /// Moves the Selected items from the Added items to the Available items
3:  /// </summary>
4:  /// <param name="sender">The source of the event.</param>
5:  /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
6:  protected void btnRemove_Click(object sender, EventArgs e)
7:   {
8:   if (lstAdded.SelectedIndex >= 0)
9:   {
10:   for (int i = 0; i < lstAdded.Items.Count; i++)
11:   {
12:   if (lstAdded.Items[i].Selected)
13:   {
14:   if (!arlList.Contains(lstAdded.Items[i]))
15:   arlList.Add(lstAdded.Items[i]);
16:   }
17:   }
18:   for (int i = 0; i < arlList.Count; i++)
19:   {
20:   if (!lstAvailable.Items.Contains((ListItem)arlList[i]))
21:   lstAvailable.Items.Add((ListItem)arlList[i]);
22:   lstAdded.Items.Remove((ListItem)arlList[i]);
23:   }
24:   }
25:   }

On Click of 'Remove All' I am first adding all the items from Added Items List Box to Available Items ListBox, and then clearing all the items from the Added Items ListBox.

Code Snippet


1:   /// <summary>
2:   /// Moves all the items from the Added items to the Available items
3:   /// </summary>
4:   /// <param name="sender">The source of the event.</param>
5:   /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
6:   protected void btnRemoveAll_Click(object sender, EventArgs e)
7:   {
8:   foreach (ListItem list in lstAdded.Items)
9:   {
10:   lstAvailable.Items.Add(list);
11:   }
12:   lstAdded.Items.Clear();
13:   }

In ASPX code I am adding just basic look and feel which will look like the one which is given in the screen shot at the beginning of the Post, but you can extend this control to customize the look and feel.

In this Post, I have given the source code of the Control only, in my next Post I will give the sample implementation of this control, using ASP.NET and LINQ.

You can download the Source Code (C#) and Help File from here.

Any Comments, Suggestion or Corrections Welcome,

Thanks

Brij Mohan

1 Comment