Radcombobox with checkbox with multiple selection and have Select All

Today, I am gonna explain how RadComboBox with checkbox works. We are going to create a usercontrol (ucCustomCombobox) .Here I have a RadComboBox with chechkbox.. Here RadComboBox allows multiple selection. on checking select All checkbox which on checked, all the rest should be checked and vice versa .So I am gonna explain in simpler steps, how I did it.
1.Checkbox was kept inside the ItemTemplate of RadComboBox

' />

Familiaraize with The data binding expression <%# expression %>. You will be dealing with this expressions.
Container.Text is a runtime alias for the Text for this specific item in the bound list.
Client side coding is done using scripting languages javascript.
2.Functions
We can see that the checkbox is kept in a div.This function is used to retrieve checkbox
function getItemCheckBox(item) {
//Get the 'div' representing the current RadComboBox Item.
var itemDiv = item.get_element();

//Get the collection of all 'input' elements in the 'div' (which are contained in the Item).
var inputs = itemDiv.getElementsByTagName("input");

for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {
var input = inputs[inputIndex];

//Check the type of the current 'input' element.
if (input.type == "checkbox") {
return input;
}
}
Here we have a function which works on checking select All checkbox which on checked, all the rest should be checked and vice versa
function SetSelectAll(obj) {
var combo = $find("<%= RadComboBoxNonMembers.ClientID %>");

var IsChecked = obj.checked;
var items = combo.get_items();
var selectedItemsValues = "";
var itemsCount = items.get_count();

for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
var item = items.getItem(itemIndex);
var chk = getItemCheckBox(item);
if (chk != null) {
chk.checked = IsChecked;
}
}
if (IsChecked)
combo.set_text("All Selected");
else
combo.set_text("-- Select --");
}
In the rest of cases, we need to show the texts of item’s CheckBox checked seperated by comma.This is the function which work well for this.
function collectSelectedItems(obj) {
var combo = $find("<%= RadComboBoxNonMembers.ClientID %>");
document.getElementById('<%=hfValue.ClientID %>')
var items = combo.get_items();

var selectedItemsTexts = "";
var selectedItemsValues = "";

var itemsCount = items.get_count();
var FirstItemChk = getItemCheckBox(items.getItem(0));
var AllChecked = true;

for (var itemIndex = 1; itemIndex < itemsCount; itemIndex++) {

var item = items.getItem(itemIndex);
var checkbox = getItemCheckBox(item);

if (itemIndex == 0 && !obj.checked) {
FirstItemChk.checked = false;
}

if (!checkbox.checked) {
FirstItemChk.checked = false;
AllChecked = false;
}

//Check whether the Item's CheckBox) is checked.
if (checkbox.checked) {
selectedItemsTexts += item.get_text() + ", ";
selectedItemsValues += item.get_value() + ", ";

}
}

selectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2);
selectedItemsValues = selectedItemsValues.substring(0, selectedItemsValues.length - 2);

//Set the text of the RadComboBox with the texts of the selected Items, separated by ','.
combo.set_text(selectedItemsTexts);

//Set the comboValue hidden field value with values of the selected Items, separated by ','.
document.getElementById('<%=hfValue.ClientID %>').value = selectedItemsValues;
//Clear the selection that RadComboBox has made internally.
if (selectedItemsValues == "") {
combo.clearSelection();
}

if (AllChecked) {
combo.set_text("All Selected");
FirstItemChk.checked = true;
}
}

$get(document.getElementById) is mainly used for normal controls like textboxes,checkboxes, buttons .and $find is used for Extender controls.

To prevent dropdown closing on clicking the item
function StopPropagation(e) {
//cancel bubbling
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
We have added a hiddenfield and a button

' />

.