Support for Muli-select with checkboxes?

14 posts, 0 answers
  1. Joe
    Joe avatar
    44 posts
    Member since:
    Sep 2008

    Posted 29 Sep 2008 Link to this post

    Does the rad combobox offer support for multiple selections using check boxes? If so, is there a demo/example of this out there?

    Thank You.
  2. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 29 Sep 2008 Link to this post

    Hey Joe,

    Check out the following code library submission that covers just that topic:

    Using CheckBoxes in ComboBox

    :)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joe
    Joe avatar
    44 posts
    Member since:
    Sep 2008

    Posted 20 Oct 2008 Link to this post

    I'm not sure this is the best place for my question, but I couldn't add another post to the forum in the sample area....

    Here is my issue. When the user selects the arrow to drop down the combo box, they see all the available checkboxes and corresponding item text as expected. However, if they click the item text and not the checkbox, then the text of the item they clicked appears in the "main area" of the combo box. This does not select the checkbox.

    So what is happening is users are getting confused. They think they have made a selection, the text of that item has appeared in the main combo box area, but in fact it has not selected the checkbox and is subsequently not inserted as a selection.

    Best case for this issue is to somehow disable the ability to select the item text. Then the user would be forced to check the checkbox. If they accidentally click the item text, nothing happens and that text does not show in the main combo box area.

    Alternate work around would be if they did accidentally hit the item text, then it forces the checkbox to be checked.

    A sample of my application can be found here: http://feedback.phf.org/corecompetencies This is a simple prototype and does not have any functionality.

    Any suggestions to fix this issue are welcome.

    Thank You.
  5. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 20 Oct 2008 Link to this post

    Hi Joe,

    Please find attached a sample project which demonstrates how to check the checkbox when you click on the text of the item.

    All the best,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Joe
    Joe avatar
    44 posts
    Member since:
    Sep 2008

    Posted 20 Oct 2008 Link to this post

    Thank you for the example. However, your example will not build. It did not have the dll's for the references. I tried adding them from my machine, but I still couldn't get it to build.

    I did try to implement the example anyway. I am getting a javascript error when I try to close the drop down list or click on any item inside the drop down list.

    You can view the example at the URL I gave in my previous post. The only combo box I applied the example to was the Race/Ethnicity selection. You can see the javascript error there.

    Here is the relavent code for it. Thank You.

     

     

     <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("<%= ddlRace.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>    

       <input type="hidden" id="comboValue" value="" runat="server" /> 
        <rad:RadComboBox ID="ddlRace" runat="server" Skin="Vista" Width="290px" AllowCustomText="true" 
          OnClientDropDownOpening="OnClientDropDownOpening" OnClientDropDownClosing="OnClientDropDownClosing" 
        OnClientSelectedIndexChanging="OnClientSelectedIndexChanging" OnClientBlur="OnClientBlur">  
            <Items> 
                <rad:RadComboBoxItem ID="RadComboBoxItem7" runat="server" Text="Select..." Value="" /> 
                <rad:RadComboBoxItem ID="RadComboBoxItem8" runat="server" Text="Alaskan Native"   
                    Value="Alaskan Native" /> 
                <rad:RadComboBoxItem ID="RadComboBoxItem9" runat="server" Text="American Indian"   
                    Value="American Indian" /> 
                <rad:RadComboBoxItem ID="RadComboBoxItem10" runat="server" Text="Asian" Value="Asian" /> 
                <rad:RadComboBoxItem ID="RadComboBoxItem11" runat="server" Text="Black or African American"   
                    Value="Black or African American" /> 
                <rad:RadComboBoxItem ID="RadComboBoxItem12" runat="server" Text="Native Hawaiian/Other Pacific Islander"   
                    Value="Native Hawaiian/Other Pacific Islander" /> 
                <rad:RadComboBoxItem ID="RadComboBoxItem13" runat="server" Text="White"   
                    Value="White" /> 
                <rad:RadComboBoxItem ID="RadComboBoxItem14" runat="server" Text="Hispanic/Latino"   
                    Value="Hispanic/Latino" /> 
            </Items> 
            <ItemTemplate> 
                 <asp:CheckBox runat="server" ID="cbxRace" onclick="checkboxClick()" Text=""/> <%# DataBinder.Eval(Container, "Text") %> 
            </ItemTemplate> 
              
        </rad:RadComboBox> 

     

     

  7. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 23 Oct 2008 Link to this post

    Hi Joe,

    The code I sent you is for RadComboBox for ASP.NET AJAX.

    Do you use the "classic" RadComboBox?

    Best wishes,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Joe
    Joe avatar
    44 posts
    Member since:
    Sep 2008

    Posted 23 Oct 2008 Link to this post

    I believe I have the ASP.NET AJAX controls. We got them last fall, so they say Q3 2007 in my folder structure.

    Do I need to download the latest builds?

    Thanks.
  9. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 24 Oct 2008 Link to this post

    Hello Joe,

    Yes, I recommend that you install the latest build.

    Sincerely yours,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Chanan Zass
    Chanan Zass avatar
    50 posts
    Member since:
    Aug 2012

    Posted 11 Aug 2009 Link to this post

    Greetings,

    In reference to Veselin Vasilev's attached code, which works fine with the Q1 2009 version:
    Is there a simple way of checking certain checkboxes OnDataBound?

    Seems a bit difficult to accomplish in CodeBehind as checkboxes are written to the page as standard html, not as ASP.NET controls.

    Any idea would be welcomed.

  11. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 14 Aug 2009 Link to this post

    Hi Chanan Zass,

    You can.

    Please find attached the modified project.

    Kind regards,
    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  12. Chanan Zass
    Chanan Zass avatar
    50 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2009 Link to this post

    Beautiful!
    Works like a charm.
    Only a minor problem, as the RadComboBox value shows always duplicate values:

    Egypt, Kenya, New Zealand, India, England, Germany, Canada, Brazil, Chile, Egypt, Kenya, New Zealand, India, England, Germany, Canada, Brazil, Chile,

    I've tried tweaking the collectSelectedItems() function, but to no avail.

    Thanks much.
  13. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 14 Aug 2009 Link to this post

    Hello Chanan Zass,

    Strange, I am not reproducing this on the project I sent you (using the latest official release).

    Kind regards,
    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  14. Chanan Zass
    Chanan Zass avatar
    50 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2009 Link to this post

    Will check this.
    I'm using the 2009.1.527.35 version (Q1 2009).

    I'll try with the latest version.

    Many thanks, again.
  15. Chanan Zass
    Chanan Zass avatar
    50 posts
    Member since:
    Aug 2012

    Posted 17 Aug 2009 Link to this post

    I've run it with the latest version (Q2 2009) and had the same duplicate record problem.
    Ended up editing the  RadComboBox1_DataBound sub (in VB.NET), adding "And If chk.Checked = False" :

    Protected Sub RadComboBox1_DataBound(ByVal o As Object, ByVal e As EventArgs) Handles RadComboBox1.DataBound  
            Dim combo As RadComboBox = CType(o, RadComboBox)  
            For Each item As RadComboBoxItem In combo.Items  
                Dim chk As CheckBox = CType(item.FindControl("CheckBox"), CheckBox)  
                If item.Index Mod 2 = 0 And chk.Checked = False Then  
                    chk.Checked = True 
                    combo.Text += item.Text & ", "  
                End If  
            Next  
        End Sub 

    Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017