Solved

Multiselect combobox

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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to set focus on a dynamic control 18 47
Data Analysis 7 58
async questions 5 46
Error in Visual Project 10 45
Go is an acronym of golang, is a programming language developed Google in 2007. Go is a new language that is mostly in the C family, with significant input from Pascal/Modula/Oberon family. Hence Go arisen as low-level language with fast compilation…
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.
This tutorial explains how to use the VisualVM tool for the Java platform application. This video goes into detail on the Threads, Sampler, and Profiler tabs.
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 …

738 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