CheckComboBox for ASPX web

Download demo project - 6.6 KB

Sample Image - CheckComboBox_for_web.jpg

How to use

It is very easy to use. Just follow the steps given below:

Provide a DataTable, which has the first column named "Text" and the second column named "Value", as its DataSource
Set its checked items by setting the value string of its "SelectedValue" property, and the value string is divided by comma
Right click to select all or none, so do the first checkbox without text in dropdownlist
Click to hide all expanded menu, except for the one on which the cursor is

The three required files are:

CheckComboBox.ascx.cs
CheckComboBox.ascx
Yan.js

The sample code is given below:

// set its DataSource and Binding.
DataTable dt0 = new DataTable();

dt0.Columns.Add("Text", System.Type.GetType("System.String"));
dt0.Columns.Add("Value", System.Type.GetType("System.String"));

for (int i = 0; i < 100; i++)
{
  DataRow dr = dt0.NewRow();

  dr[1] = i.ToString();
  dr[0] = ((char)('A' + i)).ToString();

  dt0.Rows.Add(dr);
}

CheckComboBox1.DataSrc = dt0;


// get its selected values
Response.Write("
Control 1
Checked Value=" + CheckComboBox1.SelectedValue);

// set its selected items
CheckComboBox1.SelectedValue = "1,11,111";

// clear its selected items
CheckComboBox1.SelectedValue = "";

// if you want to hide all expanded menu of CheckComboBox by click,
// you must provide all id of CheckComboBox in the page
// and invoke the HideAllMenu() JavaScript method, as the following HTML code.
...
<body onclick="HideMenu()">
...
</body>
<script language="javascript">
function HideMenu()
{
  var arrDD = new Array("CheckComboBox1", "CheckComboBox2");

  HideAllMenu(arrDD);
}
</script>
</html>