If I change the Onclick of the checkbox, then I can't run the multi-select code. Because the mulit-select is slowing down my page, I only want the user to see 5-10 names at a time. Notice I'm using a Stored Procedure to populate the dropdown.
Here is my code:
<script type="text/javascript">
var supressDropDownClosing = false;
function OnClientDropDownClosing(sender, eventArgs)
{
eventArgs.set_cancel(supressDropDownClosing);
}
function OnClientSelectedIndexChanging(sender, eventArgs)
{
eventArgs.set_cancel(supressDropDownClosing);
}
function OnClientDropDownOpening(sender, eventArgs)
{
supressDropDownClosing =
true;
}
function OnClientBlur(sender)
{
supressDropDownClosing =
false;
sender.toggleDropDown();
}
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;
}
}
return null;
}
//---------------------------Admin Assistant
function checkboxClick()
{
collectSelectedItems();
}
function collectSelectedItems()
{
var combo = $find("<%= ddlAdminAssistant.ClientID %>");
var items = combo.get_items();
var selectedItemsTexts = "";
var selectedItemsValues = "";
var itemsCount = items.get_count();
for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++)
{
var item = items.getItem(itemIndex);
var checkbox = getItemCheckBox(item);
//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(
"<%= comboValue.ClientID %>").value = selectedItemsValues;
//Clear the selection that RadComboBox has made internally.
if (selectedItemsValues == "")
{
combo.clearSelection();
}
}
<
div>
<input id="comboValue" runat="server" type="hidden" value="" /><telerik:RadComboBox ID="ddlAdminAssistant"
runat="server" AllowCustomText="True" DataSourceID="sdsAssistants" DataTextField="UserName" DataValueField="UserID"
Height="100px" HighlightTemplatedItems="True" OnClientBlur="OnClientBlur" OnClientDropDownClosing="OnClientDropDownClosing"
OnClientDropDownOpening="OnClientDropDownOpening" OnClientSelectedIndexChanging="OnClientSelectedIndexChanging"
EnableLoadOnDemand="True" ShowMoreResultsBox="True" OnItemsRequested="ddlAdminAssistant_ItemsRequested" EnableVirtualScrolling="true">
<CollapseAnimation Duration="200" Type="OutQuint" />
<ItemTemplate>
<asp:CheckBox ID="CheckBox" runat="server" onclick="checkboxClick();" Text='<%# DataBinder.Eval(Container, "Text") %>' /></ItemTemplate>
</telerik:RadComboBox>
</div>