Tuesday, April 6, 2010

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


' />




.

Microsoft .Net.

Dot net family.

What is that all about??
What really comes into the mind on hearing . net is most probably “INTERNET” and “NETWORK… Don’t be fooled by the dot net label.

As we know microsoft introduces new technology almost every year.It always have chosen the evolutionary approach to the software.ie,bringing modifications to the existing one and releasing it as a new product.The reason be hind this was always concerned about backward comaptability.Everytime, when it comes with something new, it always faced the problem of complexity.. new product is released but it has become much more complex..How long will this updating process continue.More complex it becomes, on more updations.