Handy List Selection Control that We Use Every Day

Introduction

I still remember the difficulty that I faced the first time I tried to design something like this in VC++ and ASP.NET. It was annoying and I always wondered why there is no control like this available in the world when it is used widely in almost all the applications that we develop. Later, with the power and simplicity of C#, I thought, I can write and help others to do their job more easily and effectively.

For simplicity, I call the left side List box as the source and the right side as the destination. You need to supply the input to fill the source List box. It takes a collection (ArrayList) as an argument. Your interest in this control is the items that are selected and also returned as an ArrayList. Because it is a collection that deals with objects, you can fill any data you want in the list box.

The array list is added directly to the List box instead of adding each item one by one.

private void AddElements(System.Windows.Forms.ListBox tempLst,
                         ArrayList tempArray)
   {
      tempLst.Items.Clear();
      int intMaxElements = tempArray.Count; 
      object[] bunchOfStuff = new object[intMaxElements];
      bunchOfStuff = tempArray.ToArray();
      tempLst.Items.AddRange(bunchOfStuff);

   }

If your application deals with Arrays, it is quite easy to convert from Array to ArrayList using C#'s built-in functions.

The control exposes the following Methods:

  1. //public void SetSourceData(ArrayList sourceArray)
    SetSourceData
  2. GetDestData     //public ArrayList GetDestData()
  3. //public void SetDestData(ArrayList DestArray)
    SetDestData
  4. GetSourceData   //public ArrayList GetSourceData()

The first two methods should suffice for your general use. But later, I thought there may be cases where the destination data will be filled and later it must be modified (this generally happens when you are editing your saved data). So, the latter two methods will be useful in that case.

The Control Properties:

  1. SourceLabel    //to set/get the Source List box Label
  2. //to set/get the Destination List box Label
    DestinationLabel
  3. ItemText       //to set/get the Group box label

I set these properties using the Properties Window, but if you like you can set them dynamically at runtime.

I implemented the resize event for the control so that the control will fit for your required size. I set a minimum size for the control so that it will not be set to too small.

Note: I was doing some simple arithmetic in the resize function, but this may not be required for you to understand.

A double-click event is implemented on both the list boxes so that you don't need to select the item and then click the buttons. When selecting and double-clicking any Item in the List box, it will be added automatically to the other List box.

Handy List Selection Control that We Use Every Day

About the Demo Project

I am a big fan of cricket and I chose to select my own "fantasy" team of 11 from the available players to show the demo.

[FinalResult.JPG]

  1. Download the source code and unzip it.
  2. Open VS.NET's Tool menu and select "Add/Remove Toolbox Items".
  3. Click "Browse" and navigate to the SelectListCtrl.dlll in the bin\Release directory of the source code.
  4. Click Open and then OK; the SelectListCtrl.dll control will now be in your Toolbox. The selectListCtrl will appear in General section of the tool box. Just drag the control onto your form to use it.
  5. [ToolBox.JPG]

  6. You can resize the control to the size that fits your requirement and space on your application's User Interface.
  7. Set the control's following properties, using the Properties Window of the control.
    • Source Label (This will set the label for the first List box).
    • DestinationLabel(This will set the label for the second List box)
    • ItemText (This will set the label for the Group Box that is containing the List box).

[Properties.JPG]

Filling Data to the Control

You can fill your data in an arraylist. Just call the control's SetSourceData method by passing the ArrayList.

ArrayList Players = new ArrayList();
   Players.Add("Sachin Tendulkar");
   Players.Add("Virender Sehwag");
   ...
   ...
   ...
   ...

   Players.Add("Rohith Sharma");
   Players.Add("Mohammad Kaif");

   this.userControl11.SetSourceData(Players);

Reading the Selected Data from the Control

I implemented a Click event for the OK button so that you will know how to read the selected data. I am just displaying a message box where all the selected players' names are displayed.

ArrayList SelectedPlayers = new ArrayList();
   SelectedPlayers = this.userControl11.GetDestData();
   string result = "" ;
   foreach (string i in SelectedPlayers)
   {
      result += i + "::::";
   }
   MessageBox.Show(result);

I hope you will enjoy using this control.



About the Author

Nagavardhan Ponnada

I have been working in VC++ for 7 years and now a big fan of DOT NET. I also like solving puzzles by writing programs. I work as a consultant in the areas of VC++, DOTNET and User interface programming is my big area of interest. I am also MCP in SQL Server and Database is also my area of interest as always.

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Organizations are increasingly gravitating toward mobile-first application development as they assess the need to revamp their application portfolios to support touch computing and mobility. Consumerization has brought higher expectations for application usability along with the mobile devices themselves. Enterprises are increasingly shifting their new application acquisitions and development efforts toward mobile platforms. With this backdrop, it is natural to expect application platform vendors to invest in …

  • Gain buy-in, choose the right tools, and encourage employees to participate. Whether you need help introducing social media or making your efforts more successful, this is the guide for you. It contains 140 tips in tweet form (140 characters or less) with ideas for promoting social media, deciding which venues to use, and encouraging participation. Plus, the guide contains links to social media statistics, informative websites, and other resources.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date