Solved

Multiselect combobox

Posted on 2011-03-25
3
1,157 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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Having just graduated from college and entered the workforce, I don’t find myself always using the tools and programs I grew accustomed to over the past four years. However, there is one program I continually find myself reverting back to…R.   So …
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
The viewer will learn how to user default arguments when defining functions. This method of defining functions will be contrasted with the non-default-argument of defining functions.

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now