?
Solved

Multiselect combobox

Posted on 2011-03-25
3
Medium Priority
?
1,206 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

More Than Just A Video Library

Train for your certification. Learn the latest DevOps tools. Grow your skillset to do better work.

At Linux Academy, we release new training modules every week so you'll always be up to date on the latest tech.

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 …
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
The goal of the video will be to teach the user the difference and consequence of passing data by value vs passing data by reference in C++. An example of passing data by value as well as an example of passing data by reference will be be given. Bot…
This video will show you how to get GIT to work in Eclipse.   It will walk you through how to install the EGit plugin in eclipse and how to checkout an existing repository.
Suggested Courses

770 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