Customized ListView Control

• Download source - 45.8 Kb

Introduction

This is a customized ListView control having facility for sorting, finding an element in the list, selecting necessary rows from the list by using a checkbox, selecting all rows in the list and inverting the selection.

And also, this control has the provision to fetch data from three different types of data sources (Jet, Oracle & SQL Server) just by specifying the following necessary inputs. Given below are the Connection properties in the control. In the Property window, these will be shows in the Category called “Connection”.

• DataSource

  This property is used to specify the data source for the connection.

• Password

  This property is used to specify the password for the database to open it in the connection.

• Provider

  This property informs the connection about the type of database (Jet/Oracle/SQL Server) from which we are going to fetch the data to the control.

• UserId

  This property is used to specify the UserId for the database to the open the connection.

Given below are the other ListView properties in the control. In the Property window, these will be shown in the Category called “Listview Settings”.

• Checkboxes

  This will tell the control whether we need the checkbox in the ListView or not.

• EasyMultiSelect

  This will tell the control whether to display the selected item in the bottom or not.

• EasySelect

  This will tell the control whether we need the “Select All” and “Invert” buttons or not.

• FieldDescriptionList

  Used to specify the column name for the ListView columns.

• FieldNameList

  Used to specify the database column from which data is to be displayed in columns in the ListView.

• FieldSizeList

  Used to specify the column size for the ListView columns.

• FullRowSelect

  Turn On/Off the FullRowSelection in the ListView.

• GridLines

  Turn On/Off the GridLines in the ListView.

• QueryName

  Specify the SQL statement to be used to fetch data from the database to the ListView.

In the ListView control, there are two non-browsable properties:

• SelectedItems

  This will return the list of items selected from the ListView.

• SelectedRows

  This is a ReadOnly property that will return the deleted rows as a DataSet.

Technical part of this control

• When we load the user defined control in the toolbox, it will have the ListView control icon instead of the default icon.
• Grouping the properties under certain categories in the Property window.
• Description for each and every property.

The above mentioned things are established in the control using the “System.ComponentModel”, by using the following attributes:

• <ToolboxBitmap>

  This attribute is used to specify the icon for the user control.

• <Description>

  This attribute is used to specify a short description about a property.

• <Category>

  This attribute is used to place a property in the desired category.

E.g.:

<ToolboxBitmap(GetType(ListView))> _
Public Class ListSelected
<Description("On/Off the Checkbox in Listview"), Category("Listview Settings")> _
    Public Property Checkboxes() As Boolean
        Get
            Checkboxes = LstView.CheckBoxes
        End Get
        Set(ByVal New_Checkboxes As Boolean)
            LstView.CheckBoxes = New_Checkboxes
        End Set
    End Class

Sorting

Custom class (LstSort) implements the IComparable interface and overrides the Compare function with its own code. Take that class and set the ListViewItemSorter property of the ListView equal to it.

Have a look at how it is used in the column click event of the ListView object. Given below is the screenshot of the Design Time Property Sheet of the custom ListView:

How to use the control

Re-build the control and load this control in your own project. Set the properties as in the property sheet in the above screen shot, and then run the application.

The test application screenshot is as follows. I just placed the control and set the properties as mentioned above.

If we click on the “Selected Items” button, the screen will look like this:

If we click on the “Selected Rows” button, the screen will look like this:

If we press the ‘OK’ button, it will show the next selected row in the message box.