Displaying multiple items in CB Text

4 posts, 0 answers
  1. Jim
    Jim avatar
    15 posts
    Member since:
    Jan 2009

    Posted 05 Jun 2009 Link to this post

    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
  2. Jim
    Jim avatar
    15 posts
    Member since:
    Jan 2009

    Posted 05 Jun 2009 Link to this post

    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.



  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Scott
    Scott avatar
    45 posts
    Member since:
    Apr 2008
  5. Jim
    Jim avatar
    15 posts
    Member since:
    Jan 2009

    Posted 08 Jun 2009 Link to this post

    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
Back to Top