I am a software engineer. I have been working with C++, MFC, and .net technologies for 15 years. I like video games and reading books.
In this article Mr. Ax will develop a simple form that uses Combo box, Toggle button-using Checkbox, Multi-Select List Box and Checked List Box. Before he implements it, he will meet his lead Mr.Zx who has the initial design (based on requirement) with him. The requirement given by Mr.Zx is explained below with a screenshot:
2. Mr. Zx Explains:
Hey Ax! How are you? I need a form that will be used to assign the work to a salesperson. I contacted our client, and based on their requirement, I had the initial design drawn in the white board [Mr Ax, Looks at the screenshot above]. The top one is a combo box that will list the sales persons working in our client company. Once you pick a person from the list, the person should be displayed on the label stating “Sales assignment for the Person Name”. Also note that user should not be allowed to edit the name of the salesperson in the ComboBox.
Once you select the sales person, now you are ready for assigning the area he or she needs to visit in 2 months. To do that, pick the area from the Visit Area List Box and Move it to the Assigned List Box using the button “>>“. You can also revoke the assigned area by selecting the area from the right and move it to the left List Box using the button “<<”. You must support multiple selections on both sides of the List boxes.
The last stuff is, place the list box which lists all the products that need to be promoted by the salesperson on the assigned area. By default USB Drive item should be selected when the form is displayed. There should be a toggle button, which should be turned ON when the form is displayed reading “Restricted Mode On”. And it should toggle between Restricted Mode On and Restricted Mode Off. When Restricted Mode is turned ON, you should not allow user editing the items Mother Board and USB. This is the task for you in this week. Once you finished, I will move this form to the Database Developer who will link your initial design with the database.
3. Let us start with Form design
To know the form design open the attached project, select each control one by one and look at the properties that appears in Bold. These are all the properties changed from the default by Mr. Ax. I will explain only the important properties set for each control one by one and leaving the other properties for you to explore.
Sales Person ComboBox
1) We set Dropdownstyle property with value DropDownList. This property restricts the user typing their own entry in the edit section of the Combo Box.
2) Next, named of the salesperson are added to the combo box using the Items Property. Mr. Ax knows the other team will populate this combo box from the database. So he prepared the values and added it in the design time of the form.
3) Name Property set to cmbSalesPerson.
Label below the ComboBox
1) Name property changed to lblDisplay.
1) Name property is set to lstArea
2) Area names are added using Items Property
3) We set SelectionMode property with a value MultiExtended and this allows picking multiple items from it. We can select multiple items in the list box by following these techniques:
- Hold down the ctrl key and select the items one by one. All the items clicked are selected.
- Select the first item, hold the shift key, and select another item. Both the List box items are selected and besides that all the items which stays in between them also get selected.
- Hold the left mouse button on the item and drag the mouse. All the items visited by the mouse pointer get selected.
4) We set Sort Property to true. This is to sort the List Box items.
Button between Two Lists
1) Name property set to btnAssign, btnRevoke
1) Name property is set to lstAssigned
2) Sorted property is set to true
3) The Selection Mode is set to MultiSimple. Now, both the list boxes are supporting multi-Selection. The difference exists on how the multi-select performed. Here, when you click the item it will go to the opposite state. For example, when an item is in a selected state, it goes to unselected state and vice versa.
Checked List box control - Promote Products
1) Name property is set to lstPromote products.
2) CheckOnClick Property is set to true. When it is true, clicking an item will select it and also changes the check mark of item toggles between checked and unchecked.
3) Products are entered into the CheckedListBox using Items Property.
Check box control below the Combo box [it is not button]
1) Name Property set to chkRestricted
2) Appearance Property is set to Button
3) FlatStyle Property is set to System
4. Form Load
Form load event will clear the label lblDisplay and also checks the USB Drive items in the CheckedListBox. Have a look at the Mr. Zx’s expectation. After placing the check mark, the check state of the toggle button is set to Checked State. Below is the code for the Form load event procedure:
5. Salesperson ComboBox
When we change the item in the combo box, SelectedIndexChanged Event is fired. We set the lblDisplay label with the selected person’s Name in side this event procedure. Below is the code for it:
6. Assign Button Control in Action
The click event handler of the assign button will move all the selected items from the left ListBox Control to the right ListBox Control. First, we retrieve the selected items using the foreach loop, and then inside loop we ask to add the item to assigned ListBox Control. Remember, both the ListBox Controls has the Sorted Property set to true.
Next, we calculate the total items selected in the Area list box. Then using a for loop we remove all the selected items one by one. The code is given below:
We may have two questions now. 1) Why the SelectedItems Collection is always referred with index 0 while we call the remove function? 2) Why cannot we remove the item in the first foreach loop itself?
For the first question, we are always retrieving the collection from the lstArea. But on each iteration, an item is removed (The selected one) from the selected list. Hence, the index zero has the non-deleted item for removal.
For Second Question, ForEach does not allow the modification to the collection in which it operates on. Hence, we are not removing the items in the first loop.
7. Revoke Button Control in Action
We do similar coding as we did in the previous section. But, here we are moving the items from Right to Left. The code we write as follows:
8. CheckBox Acting as Toggle Button
When we change the check state of the check box, an Event called CheckStateChanged is fired. The form handles that event here to change the text of the check box that look like toggle button. Below is the code:
9. Lock Specific CheckedListBox Entires
When we place a check mark or remove it from the item, Dotnet Framework fires ItemCheck Event. Also, the argument ItemCheckEventArgs passed to this Event handler will have NewValue and CurrentValue as properties. For example, if we click an item which is already in the Checked State then, NewValue is UnChecked and Current Value is Checked.
So the code below checks the Restricted Mode toggle button’s state and resets the NewValue with CurrentValue, there by keeping the item in the same state. In end user point of view, the items are in locked for modification. Below is the code for it:
Source Code Example: Download
This example is created using VS 2005 IDE.
© 2018 sirama