Improve company productivity with a Business Account.Sign Up

x
?
Solved

Multiselect combobox

Posted on 2011-03-25
3
Medium Priority
?
1,243 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 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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
The PowerShell Core 6.0 of .NET release is just the beginning. The upcoming PowerShell Core 6.1 would have artificial intelligence and internet of things capabilities. So many things to look forward to in the upcoming release.
This video teaches viewers about errors in exception handling.
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.

606 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