Solved

Multiselect combobox

Posted on 2011-03-25
3
1,179 Views
Last Modified: 2012-05-11
Hi,

I have the following code which i need to select multiply items from a dropdown


The problem i am getting is

var combo = $find(""); is empty so i'm getting Microsoft JScript runtime error: 'null' is null or not an object.


Aslo document.getElementById("comboValue").value = selectedItemsValues;

 is causing this error message Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object

I'm using a user control so can someone please advise me on how to get around this problem.

Thanks in advance fro any help given



ASPX

<div>

 <input type="hidden" id="comboValue" value="" runat="server" />

<telerik:RadComboBox  ID="ddlAge" Width="210px" runat="server" 

EmptyMessage="All Types"

AllowCustomText="true"

HighlightTemplatedItems="true"

OnClientDropDownOpening="OnClientDropDownOpening"

OnClientDropDownClosing="OnClientDropDownClosing"

OnClientSelectedIndexChanging="OnClientSelectedIndexChanging"

OnClientBlur="OnClientBlur">

<ItemTemplate>

<asp:CheckBox runat="server" ID="CheckBox" onclick="checkboxClick();" Text='<%# DataBinder.Eval(Container.DataItem,"Value") %>' /> 

<asp:Label ID="lblVName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Value") %>' Visible="false"></asp:Label> 

</ItemTemplate>

</telerik:RadComboBox>

</div>

Javascript

<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 checkboxClick()

{ 

collectSelectedItems();

}


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;

}


function collectSelectedItems()

{


var combo = $find("<%# ddlAge.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").value = selectedItemsValues;


//Clear the selection that RadComboBox has made internally.

if (selectedItemsValues == "")

{

combo.clearSelection();

}

}


</script>

Open in new window

0
Comment
Question by:cjJosephj
  • 2
3 Comments
 
LVL 2

Expert Comment

by:edzhu
ID: 35214682
If you use the telerik control for .net framework 4.0, you can try to set the ClientIDMode of radcombo as "Static". Please refer to http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx.
The Telerik control supports this feature from version 2010.2.713.
0
 

Author Comment

by:cjJosephj
ID: 35217746
Thanks for your reply,

I have added ClientIDMode="static"

  <input type="hidden" id="comboValue" clientidmode="Static" value="" runat="server" />
            <asp:Label  CssClass="filterLabel" ID="lblAge" runat="server">Age</asp:Label>
           <telerik:RadComboBox  clientidmode="Static" ID="ddlAge"  Width="210px" runat="server"


but now only the last checkbox gets checked and the i get an extra checkbox that has no label
0
 
LVL 2

Accepted Solution

by:
edzhu earned 500 total points
ID: 35220166
I think now you don't have the javascript error. It is a new issue about this multiselected combobox.
The extra checkbox without label may be introduced when you bind the data in the background code. Please check the page load method in code file. The problem that only the last checkbox gets checked is due to that you have been set the OnClientSelectedIndexChanging function to clear the selection in the dropdown list. When you check the new checkbox, the function will be triggered and clear your original checked item, then invoke the checkboxClick() function. Therefore, you will just get the last checkbox value.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to remove superseded packages in windows w60 or w61 installation media (.wim) or online system to prevent unnecessary space. w60 means Windows Vista or Windows Server 2008. w61 means Windows 7 or Windows Server 2008 R2. There are various …
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The viewer will learn how to implement Singleton Design Pattern in Java.
The viewer will learn how to pass data into a function in C++. This is one step further in using functions. Instead of only printing text onto the console, the function will be able to perform calculations with argumentents given by the user.

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question