# CheckedListBox

The [Wisej.Web.CheckedListBox](https://docs.wisej.com/api/namespaces/wisej.web/checkedlistbox) is based upon the [Wisej.Web.ListBox](https://docs.wisej.com/api/namespaces/wisej.web/listbox) control but includes a checkbox on the left side of each list item.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation](https://docs.wisej.com/api/wisej.web/lists-and-grids/checkedlistbox).
{% endhint %}

## Features

### Checkbox

Each item within the CheckedListBox control has a checkbox on the left side of it.

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-153bc9ce4d7d8c449781beb12d04393ad7676079%2FCheckedListBox.png?alt=media" alt=""></div>

{% hint style="info" %}
Similar to DisplayMember, ValueMember, etc. The CheckedListBox control contains a property, **CheckStateMember**, that defines the property of the data source or list that sets the check state for each item.
{% endhint %}

The **CheckOnClick** property of the CheckedListBox control can also be set to accept check state changes on a list item.

## How To

### Apply Checkboxes

Adding Checkboxes to the CheckedListBox control is easy. See the following code snippet:

{% tabs %}
{% tab title="C#" %}

```csharp
private void Page1_Load(object sender, EventArgs e)
{
			var myGroceries = new List<dynamic>() {
				new { name = "Eggs", price = 1.00, purchased = true },
				new { name = "Apples", price = 0.50, purchased = false },
				new { name = "Milk", price = 2.00, purchased = true },
				new { name = "Juice", price = 3.00, purchased = false }
			};

			this.checkedListBox1.DataSource = myGroceries;
			this.checkedListBox1.DisplayMember = "name";
			this.checkedListBox1.CheckStateMember = "purchased";
}
```

{% endtab %}

{% tab title="VB.NET" %}

```visual-basic
Private Sub Page1_Load(ByVal sender As Object, ByVal e As EventArgs)
        Dim myGroceries = New List(Of Object)() From {
            New With {
            .name = "Eggs",
            .price = 1.0,
            .purchased = True
        },
        New With {
            .name = "Apples",
            .price = 0.5,
            .purchased = False
        },
        New With {
            .name = "Milk",
            .price = 2.0,
            .purchased = True
        },
        New With {
            .name = "Juice",
            .price = 3.0,
            .purchased = False
        }
    }
    Me.checkedListBox1.DataSource = myGroceries
    Me.checkedListBox1.DisplayMember = "name";
    Me.checkedListBox1.CheckStateMember = "purchased";
    End Sub
```

{% endtab %}
{% endtabs %}

The above code snippet results in:

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-289d1da511b173b371309d001fb24f18da470c8e%2FCheckedListBoxCheckStateMember.png?alt=media" alt=""></div>

## Advanced

### JavaScript Widget

| Item                       | Description                                                                                                                                                                     |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Class name                 | wisej.web.CheckedListBox for the CheckedListBox. wisej.web.listbox.ListItem for each list box item.                                                                             |
| Theme appearance           | "list", "listitem" for the items in the list box. See [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                                   |
| ListBox child components   | "scrollbar-x" is the horizontal scrollbar and "scrollbar-y" is the vertical scrollbar. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model).          |
| List Item child components | "checkbox" is the checkbox shown in each list item. "icon" is the icon shown in each list item. [See JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model). |
| ToolContainer state        | "listbox", see [Embedded Tools](https://docs.wisej.com/docs/controls/general/embedded-tools).                                                                                   |
| Source code                | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                             |