This is a migrated thread and some comments may be shown as answers.

Displaying multiple items in CB Text

3 Answers 127 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Jim
Top achievements
Rank 1
Jim asked on 05 Jun 2009, 05:38 PM
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.

    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

3 Answers, 1 is accepted

Sort by
0
Jim
Top achievements
Rank 1
answered on 05 Jun 2009, 07:58 PM
I've made some progress by changing the combo definition to include the original events that I removed because of validation warnings which suddenly no longer appear:

<telerik:RadComboBox ID="RadComboBox1" runat="server"  
  oncopy="return false;" onpaste="return false;" 
  oncut="return false;" onkeypress="return tabOnly(event)" onmousewheel="return false" 
  OnClientDropDownOpening="OnClientDropDownOpening" OnClientDropDownClosing="OnClientDropDownClosing" 
  OnClientSelectedIndexChanging="OnClientSelectedIndexChanging" OnClientBlur="OnClientBlur" 
  Width="200px" AllowCustomText="True" ChangeTextOnKeyBoardNavigation="False"
</telerik:RadComboBox> 
 

I also changed the GetCheckBoxValues method to return the checkbox text instead of values.  Now when either button is clicked the text value in the combobox is updated to correctly to reflect the selections and the initial value displayed is an empty string.  What is still not working is updating the text when the checkboxes are clicked.  I set a breakpoint in the RadComboBox_ItemDataBound method and it never is reached so the onclick method is not created.



0
Scott
Top achievements
Rank 2
answered on 05 Jun 2009, 11:43 PM
0
Jim
Top achievements
Rank 1
answered on 08 Jun 2009, 03:19 PM
Hi Scott,

Thanks for the reply.  I looked at your solution when I created the sample project based on the original post.  The only real difference I see is the use of the sqldatasource instead of programatically adding the items to the combo.  I noticed that I did not have the itemdatabound event defined for the combo and now clicking on items updates the text so I'm all set at this point.  Now I need to get multiple combos on a page working which my current solution does not.

Regards,
Jim
Tags
ComboBox
Asked by
Jim
Top achievements
Rank 1
Answers by
Jim
Top achievements
Rank 1
Scott
Top achievements
Rank 2
Share this question
or