Hi All,
I'm trying to implement a combobox with checkboxes using examples found in other threads. I have the basic functionality working except I can't get the list of selected items to appear in the text area which always shows the text for the first item in the list on page load. Once I get this working I need to extend it to work with multiple combos on the page. Anyway the code is below.
And in Default.aspx:
The text in the combo is always "Item 1". At one point it was at least updating the text while the combo was open but that no longer works. Also the button to set values sets the checkboxes but the item text disappears. It reappears if the get values button is clicked.
Any help would be appreciated.
Regards,
Jim
I'm trying to implement a combobox with checkboxes using examples found in other threads. I have the basic functionality working except I can't get the list of selected items to appear in the text area which always shows the text for the first item in the list on page load. Once I get this working I need to extend it to work with multiple combos on the page. Anyway the code is below.
public class ComboCheckBoxTemplate : ITemplate |
{ |
public void InstantiateIn( Control container ) |
{ |
CheckBox cb = new CheckBox(); |
cb.ID = "ComboCheckBox"; |
cb.DataBinding += new EventHandler( CheckBox_DataBinding ); |
container.Controls.Add( cb ); |
} |
void CheckBox_DataBinding( object sender, EventArgs e ) |
{ |
CheckBox target = (CheckBox) sender; |
RadComboBoxItem item = (RadComboBoxItem) target.BindingContainer; |
target.Text = (string) DataBinder.Eval( item, "Text" ); |
} |
} |
public partial class Default : System.Web.UI.Page |
{ |
RadComboBox Combo1 |
{ |
get { return this.RadComboBox1; } |
} |
protected override void OnInit( EventArgs e ) |
{ |
RadComboBox1.ItemTemplate = new ComboCheckBoxTemplate(); |
base.OnInit( e ); |
} |
protected void Page_Load( object sender, EventArgs e ) |
{ |
if ( !this.IsPostBack ) |
BindData(); |
Combo1.DataBind(); |
string str = GetCheckBoxValues( Combo1 ); // always an emtpy string here! |
Combo1.Text = str; // This has no effect - the combo text is always set to "Item 1" |
} |
protected void BindData() |
{ |
Combo1.Items.Clear(); |
for ( int i = 1; i < 6; i++ ) |
Combo1.Items.Add( new RadComboBoxItem( "Item " + Convert.ToString( i ), Convert.ToString( i ) ) ); |
} |
protected void RadComboBox_ItemDataBound( object sender, RadComboBoxItemEventArgs e ) |
{ |
//Add each combo checkbox to the Handler |
( (CheckBox) e.Item.FindControl( "ComboCheckBox" ) ).Attributes.Add( "onclick", "checkboxClick('" + ( (Telerik.Web.UI.RadComboBox) sender ).ClientID + "', 'combo1Value');" ); |
} |
private string GetCheckBoxValues( Telerik.Web.UI.RadComboBox comboCheckbox ) |
{ |
StringBuilder sbValues = new StringBuilder(); |
foreach ( Telerik.Web.UI.RadComboBoxItem rcbItem in comboCheckbox.Items ) |
{ |
//If the box is checked return a value |
CheckBox cb = (CheckBox) rcbItem.FindControl( "ComboCheckBox" ); |
if ( null != cb && cb.Checked ) |
{ |
sbValues.Append( rcbItem.Value ); |
sbValues.Append( "," ); |
} |
} |
//Remove Trailing comma |
string str = sbValues.ToString(); |
if ( str.EndsWith( "," ) ) |
return str.Remove( sbValues.Length - 1, 1 ); |
return str; |
} |
private void SetCheckBoxValues( Telerik.Web.UI.RadComboBox comboCheckbox, string csv ) |
{ |
string[] values = csv.Split( ',' ); |
for ( int i = 0; i <= values.Length - 1; i++ ) |
{ |
CheckBox chkbox = (CheckBox) comboCheckbox.FindItemByValue( values[ i ] ).FindControl( "ComboCheckBox" ); |
if ( comboCheckbox.Text == "" ) |
comboCheckbox.Text = string.Format( "{0}", chkbox.Text ); |
else |
comboCheckbox.Text = string.Format( "{0}, {1}", comboCheckbox.Text, chkbox.Text ); |
chkbox.Checked = true; |
} |
} |
protected void Button1_Click( object sender, EventArgs e ) |
{ |
// if ( !( RadComboBox1.Text == "" ) ) |
{ |
string str = GetCheckBoxValues( Combo1 ); |
Label1.Text = str; |
} |
} |
protected void Button2_Click( object sender, System.EventArgs e ) |
{ |
BindData(); |
SetCheckBoxValues( Combo1, TextBox1.Text ); |
} |
} |
And in Default.aspx:
<form id="form1" runat="server"> |
<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(comboid,valueid) |
{ |
collectSelectedItems( comboid, valueid ); |
} |
function getItemCheckBox(item) |
{ |
//Get the 'div' representing the current RadComboBox Item. |
var itemitemDiv = 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( comboid, valueid ) |
{ |
var combo = $find(comboid); |
var items = combo.get_items(); |
var selectedItemsTexts = ""; |
var selectedItemsValues = ""; |
var itemsitemsCount = 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() + ", "; |
} |
} |
selectedItemsTextsselectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2); |
selectedItemsValuesselectedItemsValues = 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( valueid ).value = selectedItemsValues; |
if (selectedItemsValues == "") |
{ |
combo.clearSelection(); |
} |
} |
</script> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> |
<input type="hidden" id="combo1Value" value="" runat="server" /> |
<div> |
<table style="width: 45%"> |
<tr> |
<td> |
<telerik:RadComboBox ID="RadComboBox1" runat="server" onitemdatabound="RadComboBox_ItemDataBound"> |
</telerik:RadComboBox> |
</td> |
<td> |
<asp:Button ID="Button1" runat="server" Text="GetValues" onclick="Button1_Click" /> |
</td> |
</tr> |
<tr> |
<td> |
Results |
</td> |
<td> |
<asp:Label ID="Label1" runat="server"></asp:Label> |
</td> |
</tr> |
<tr> |
<td> |
<asp:TextBox ID="TextBox1" runat="server">1,3,5</asp:TextBox> |
</td> |
<td> |
<asp:Button ID="Button2" runat="server" Text="SetValues" onclick="Button2_Click" /> |
</td> |
</tr> |
</table> |
</div> |
</form> |
The text in the combo is always "Item 1". At one point it was at least updating the text while the combo was open but that no longer works. Also the button to set values sets the checkboxes but the item text disappears. It reappears if the get values button is clicked.
Any help would be appreciated.
Regards,
Jim