List Boxes

List Boxes

What is a List Box?

List box is one of the intrinsic controls. List box is used to allow user to select one or more of the given list of items.  A List box can contain any number of items, but the number of items that a List box can display depends upon the display size of the List box. If List box contains more items than what can be displayed then automatically a scrollbar is attached to List box.

Now, let us develop a small program to understand how to handle a List box. See figure 5.1, for the user interface of the program.

Figure 5.1: List box demo program at runtime.

Here are the required steps to create a new project and  user interface.

 

  1. Start a new project using File->New Project
  2. Select Standard Exe in list of project types and click on Ok.
  3. Place the required control on the form and arrange them as shown in figure 5.1.
  4. Change the properties as follows.

 

Control Property

Value

Form1 Name Frmlist
  Caption &List box Demo
Label1 Name Lblnames
  Caption Names
List1 Name Lstnames
Lable2 Name Lblname
  Caption &Name
Text1 Name Txtname
  Text (null string)
Command1 Name Cmdadd
  Caption &Add Name
Command2 Name Cmddelete
  Caption &Delete Name
Command3 Name Cmdquit
  Caption &Quit Program
Label3 Name Lblcount
  Caption # Names : 0

 

Now let us write code. We have to write code for Click event of three command buttons. We first concentrate on how to add an item to List box and how to delete an item from List box.

 

Adding an item to List box

You add an item to List box using Additem method of the List box. Additem method takes an item, which is a string, and adds that item at the end of the List box. It is also possible to add an item at the specified index using index parameter of Additem method.

 

Note:  If List box is a sorted List box (Sorted property is set to True) then item is placed in the List box according to the order of the item.

 

The following is the syntax of additem method.

 

AddItem item, index

 

 

Object  Is any List box.
Item    Is the item to be added to List box. This is a string expression.
Index  It is optional. If it is given then item is added at the specified position. Index starts from 0

 

Example:

 

To add name P.SRIKANTH to List box, enter:

 

List1.additem “P.SRIKANTH”

 

To add an item at 2nd position in the List box, enter:

 

List1.additem “Praneeth”, 2

 

Removing an item from List box

You can remove an item from List box using Removeitem method of the List box. Removeitem method takes the index of the item to be removed.

 

Here is the syntax of Removeitem method of List box:

 

RemoveItem index

 

Index The index of the item that is to be removed from List box. Index must be in the range 0 to ListCount –1. ListCount property contains the number of items in the List Box.

 

To remove item at 1st position (second item) of List box, enter:

 

List1.removeitem  1

 

 

Writing Code for cmdadd and cmddelete buttons

Now let us write code to add the name entered in textbox to List box. The code is written for Click event of add (cmdadd) button. After name is added to List box the name is removed from textbox and focus is set to textbox so that a new name can be entered by user. As this change effects the count of items in the List box, update names count by changing Caption property of lblcount.

 

Private Sub cmdadd_Click()

‘ add item to List box

lstnames.AddItem txtname.Text

‘update # items display

lblcount.Caption = “# Names : ” & Str(lstnames.ListCount)

‘ remove text from textbox

txtname.Text = “”

‘ set focus to textbox

txtname.SetFocus

End Sub

Listing 5.1: Code for adding an item.

 

Now let us write code to delete the item that is currently selected in the List box. To remove an item from the List box, use Removeitem method of the List box. Removeitem method takes index of the item to be removed. As we have to delete currently selected item, we use the index of the item that is currently selected.  ListIndex property returns the index of the item that is currently selected. Finally update count of items as deletion of an item decrements the count.

 

Private Sub cmddelete_Click()

 

‘attempt to delete only when an item is selected

If lstnames.ListIndex >= 0 Then

‘ delete the item that is currently selected

lstnames.RemoveItem lstnames.ListIndex

lblcount.Caption = “# Names : ” & Str(lstnames.ListCount)

Else  ‘no item is currently selected

Beep

End If

End Sub

Listing 5.2: Code for deleting the current item of List box.

 

Test Run

Follow the steps given below to test whether the program is doing what it is supposed to do.

 

  1. Run program by pressing F5.

At this stage the Form should be identical to figure 5.1.

 

Note: The input focus is in List box and not in textbox. So you cannot enter any text straight away into textbox.  Press tab key to move from List box to textbox. We will fix this problem later.

 

  1. Enter any name in textbox and click on Add Name

Entered name will be added to List box. Do this for a few times. Also note, the count of names will be increased whenever a name is added to List box. See figure 5.2.

  1. Now click on Delete Name

As no item in the List box is currently selected, this action should result in beep sound. See listing 5.2.

  1. Select one of the names in the List box and click on Delete Name The selected name should be removed from the list and # Names should also be decreased by one.
  2. Click on the Quit Program to quit program.

 

Setting focus to text Box instead of List box

We have seen in the test run that as soon as the program is run focus is set to List box. This is so because List box is the first control to be created out of the controls that can receive focus (enterable controls). So its TabIndex is set to 0. The control with least TabIndex will receive the focus. But we have to initially set focus to textbox and not to List box. This can be done using:

 

  • TABINDEX property
  • ACTIVATE event of Form

TABINDEX Property

Each control on the form is assigned a number depending on the order in which each control is created. The very first control is given number 0, second control 1 and so on. This number can be accessed and changed using TabIndex property of the control. When the form is loaded, out of enterable controls (controls that can receive focus such as textbox, command button etc) the control with least TABINDEX is given focus.

 

Note: Though TABINDEX exists for non-enterable controls like labels, they do not have any influence on the way focus moves between enterable controls.

 

You can change the order in which focus moves between controls when user presses tab key using TabIndex property. For example, if you want a textbox to receive focus first, then change the TabIndex property of the textbox to 0. You need not change TabIndex of the control that now has TabIndex 0(i.e. List box), because Visual Basic automatically does it for you.

 

So in our program, we can set focus to txtname instead of lstnames by changing TabIndex of txtname to 0. However, note that in this example we are not much concerned with the order in which focus moves between controls. If we are concerned, then we have to change TabIndex of all the controls to required values, so that focus moves in the required direction.

 

Changing focus to textbox using ACTIVATE event of form

Activate event of the form occurs whenever form is activated. This is different from Load event, which occurs only when the form is initially loaded, Activate event occurs whenever form is activated. Activate event can be used to send focus to a particular control as soon as the form is activated. So in our program we use Activate event to set focus to textbox as follows:

 

Private Sub Form_Activate()

‘set focus to textbox

txtname.SetFocus

End Sub

Listing 5.3: Code to set focus to textbox as and when form starts.

Figure 5.2: List box after a few names are added.

 

Properties of List box

The following table lists properties of List box. We have already used LISTINDEX and LISTCOUNT properties of List box in the previous program.

Property

Meaning

Listindex Contains the index of the item that is currently selected.
Listcount Contains the number of items the List box currently has.
Text Contains the item that is currently selected.
Sorted If set to true, items in the List box are always arranged in the ascending order.
List( ) This is an array. Each element contains an item of the List box. List(0) refers to first item, list(1) refers to second item and so on. The last element that can be accessed is LISTCOUNT –1.
Style Determines the style of the List box. If it is set to 0-standard, then items are displayed as text items. If it is set to 1-checkbox, then items are displayed with a checkbox on the left. Multiple items can be selected by checking the checkbox displayed on the left of the item.
Columns Sets a value that determines whether a List box scrolls vertically or horizontally and how the items in the columns are displayed.  If it is set to 0, then only one column is displayed and List box scrolls vertically. If it is set to>= 1 then items are arranged in snaking columns, filling the first column, then the second column, and so on. The List box scrolls horizontally and displays the specified number of columns.

Table 5.1: Properties of List box.

 

MultiSelect List boxes

So far we have seen List boxes where only one item can be selected at a time. Now we will see how to select more than one item at a time. We will also create a new program to understand properties and logic related to multiselect List boxes.

Selecting multiple item using MULTISELECT property

It is possible to select more than one item by changing the value of Multiselect  of List box property to either 1 or 2. By default this is set to 0, which allows only one item’s selection at a time.

The following are the valid values for Multiselect property of a List box.

Value Meaning
0 –None   Only one item can be selected at a time.
1 –Simple   Multiple items can be selected. Click on an item to select and deselect.
2 – Extended  Allows a contiguous block to be selected using SHIFT + mouse click.

 

Properties related to multiselect List box

The following are the properties related to multiselect List boxes. Some of the properties of List box such as LISTINDEX do not have any meaning while dealing with multiselect List box. And in the same way some of the properties that are applicable to multiselect List box may not be applicable to normal List box.

Property

Meaning

SelCount Contains the number of items currently selected.
Selected( ) It is an array. It returns true if the item with the given index is currently selected otherwise it return false.  For example,  Selected(0) returns true if the first item is currently selected.

Table  5.2: Properties related to multi-Select List box

 

Sample Application using multiselect List box

Now let us create a new project, which allows user to select required subjects from the list of available subjects. User can select more than one subject and move the selected subjects from available subjects List box to selected subjects List box. Figure 5.4 contains the program at runtime.

How does the application work?

  • The multiselect demo application displays a predefined set of subjects in first (left side) List box.
  • User can select one or more subjects and then click on > button to move selected subjects to second (right side) List box.
  • If user clicks on >> then all subjects from first List box will be moved to second List box.
  • User can select one or more subjects in the right List box and click on < to move them to left List box.
  • Selecting << will move all subjects from right List box to left List box.

Steps to create multiselect List box demo program

  1. Start a new project using File->New Project. And select Standard Exe as the project type.
  2. Place controls as show in figure 5.4.
  3. Change properties as follows.

 

Control Property Value
List1 Name Lstavailable
  Multiselect 1-simple
List2 Name Lstselected
  Multiselect 1-simple
Label1 Caption Available Subjects
Lable2 Caption Selected Subjects
Command1 Name Cmdmlr
  Caption >
Command2 Name Cmdmalr
  Caption >>
Command3 Name Cmdmrl
  Caption <
Command4 Name Cmdmarl
  Caption <<
Command5 Name Cmdquit
  Caption &Quit Program

 

I have named command buttons to represent the direction in which the button moves subjects.

For example, CMDMALR means, command button to move All items from Left to Right. The same convention is followed for other cases as well.

 

Populating List box at design time

You can place a set of predefined values into a List box at design time using the following procedure.

  1. Select the List box and press F4 to invoke properties window.
  2. Select List property and click on down arrow.
  3. Enter first subject in the given empty area and select CTRL+ENTER to move to next line.
  4. Continue the above process until all values are entered and the press ENTER

Note: To populate List box at runtime use ADDITEM method. If you want to initially load a predefined set of values at runtime, use ADDITEM method in LOAD event of the form.

 

Writing code for sample application

Now let us write code for command buttons as follows:

 

Moving all subjects

Write code for >> and << command buttons. Command button >> moves all available subjects to selected subjects List box. Command button << moves all subjects from selected List box to available List box.

 

Here is the code for both the command buttons.

 

‘ move all items from left list box to right list  box

Private Sub cmdmalr_Click()

Dim i As Integer

 

With lstavailable

‘move all subjects to lstselected

For i = 0 To .ListCount – 1

lstselected.AddItem .List(i)

Next

‘ clear subjects from lstavailable

.Clear

End With

End Sub

 

‘ move all items from right list box to left list  box

Private Sub cmdmarl_Click()

Dim i As Integer

With lstselected

‘move all subjects to lstavailable

For i = 0 To .ListCount – 1

lstavailable.AddItem .List(i)

Next

‘clear subjects from lstselected

.Clear

End With

End Sub

Listing 5.4: Code to move all items from one List box to another.

 

Now let us write code for > and < buttons. This code is slightly complicated, because you have to find out what are the items that are currently selected and move only those items. After moving the items to other List box they are to be removed from the List box.

 

Here is the code to move selected subjects from available subjects to selected subjects List box. The code invokes a procedure called DELETEITEMS, which takes a List box as parameter and deletes all the currently selected subjects from the List box.

 

Private Sub cmdmlr_Click()

 

With lstavailable

 

‘ move currently selected subjects to LSTSELECTED

For i = 0 To .ListCount – 1

If .Selected(i) Then

‘ move current item

lstselected.AddItem .List(i)

End If

Next

End With

 

‘ delete currently selected subjects from LSTAVAILABLE by calling

‘ DELETEITEMS procedure that takes the List box as the parameter

deleteitems lstavailable

End Sub

Listing 5.5: Code to move selected items from left to right.

 

Creating user-defined procedure (DELETEITEMS)

The following are the steps to create user-defined procedure DELETEITEMS.

  1. Invoke Code window by pressing F7.
  2. Select Tools-> Add Procedure. This will invoke a dialog box as shown in figure 5.3.
  3. Enter the name of the procedure as DeleteItems, as shown in figure 5.3.
  4. Click on Ok. Now Visual Basic displays skeleton for the named procedure.
  5. Enter code between Sub and End Sub. See listing 5.1, for code.

Figure 5.3: Add procedure dialog box.

Private Sub cmdMRL_Click ()

 

With lstselected

 

‘ move currently selected subject to LSTAVAILABLE

For i = 0 To .ListCount – 1

If .Selected(i) Then

‘ move current item

lstavailable.AddItem .List(i)

End If

Next

End With

 

‘ delete currently selected subjects from LSTSELECTED by calling

‘ DELETEITEMS procedure that takes the List box as the parameter

deleteitems lstselected

End Sub

 

Private Sub cmdmlr_Click()

 

With lstavailable

‘ move currently selected subject to LSTSELECTED

For i = 0 To .ListCount – 1

If .Selected(i) Then

‘ move current item

lstselected.AddItem .List(i)

End If

Next

End With

 

‘ delete currently selected subjects from LSTAVAILABLE by calling

‘ DELETEITEMS procedure that takes the List box as the parameter

deleteitems lstavailable

End Sub

Listing 5.6: Code for > and < command buttons.

 

The following is the code for CMDQUIT button.

 

Private Sub cmdquit_Click()

Unload Me

End Sub

Listing 5.7: Code for quit button.

 

 

Public Sub deleteitems(lb As List box)

 

Dim i as integer

 

‘ set the loop to move from bottom to top.

For i = lb.ListCount – 1 To 0 Step –1

‘ delete the item if the item is currently selected

If lb.Selected(i) Then

lb.RemoveItem i

End If

Next

End Sub

Listing 5.8: Code for procedure DELETEITEMS.

Test Run

Take the following steps to understand what this application can do!

 

  1. Run the project using
  2. Select Oracle and Visual Basic and click on > to move those two subjects. At this stage your program should look like figure 5.4.
  3. Now click on << to move all selected subjects back to Available subjects List box.
  4. Click on >> to select all available subjects.
  5. Select C++ and Java and click on < to move subjects from Selected List box to Available subjects List box.

Figure 5.4: Multiselect List box demo after two subjects are selected.

The following is the procedure DELETEITEMS that is used to delete all selected items in a multiselect List box.

Combo box control

A Combo box control provides the features of a List box, selecting an item from the list of items, and a textbox, where user can enter a new value if the value is not existing in the supplied list.

A Combo box may be used in the following cases:

 

  • Where user wants to key-in the value if the required value is not existing in the given list
  • Where you have less space but you have to accommodate a list of values. As Combo box displays list only on demand (when user click on down arrow) and display only the selected item, it doesn’t occupy much space on the form.

Properties of Combo box

Though most of the properties of List box also apply to Combo box, here are the properties that are specific to Combo box.

 

Property

Meaning

Locked If it is set to True, you can enter value in Combo box. You can only select existing value.
Style Determines the appearance and functionality of the Combo box. The following are the valid values:

0 (Default) Dropdown Combo – Allows selection as well as editing the text.

1 – Simple Combo – Displays List box, which doesn’t drop down and a textbox.

2 – Dropdown List – Allows selection only from the drop-down list.

Selstart, Sellength,  and Seltext They carry the same meaning that they have for Textbox. See chapter 3

Table 5.4: Properties that are specific to Combo box.

 

Note: multiple selection doesn’t apply to a Combo box. So properties like Selcount, Selected() are not available to Combo box.