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

Support for Muli-select with checkboxes?

13 Answers 172 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 29 Sep 2008, 04:15 PM
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.

13 Answers, 1 is accepted

Sort by
0
Serrin
Top achievements
Rank 1
answered on 29 Sep 2008, 04:58 PM
Hey Joe,

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

Using CheckBoxes in ComboBox

:)
0
Joe
Top achievements
Rank 1
answered on 20 Oct 2008, 03:02 PM
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.
0
Veselin Vasilev
Telerik team
answered on 20 Oct 2008, 03:25 PM
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.
0
Joe
Top achievements
Rank 1
answered on 20 Oct 2008, 07:18 PM
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> 

 

 

0
Veselin Vasilev
Telerik team
answered on 23 Oct 2008, 02:30 PM
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.
0
Joe
Top achievements
Rank 1
answered on 23 Oct 2008, 02:43 PM
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.
0
Veselin Vasilev
Telerik team
answered on 24 Oct 2008, 02:46 PM
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.
0
Chanan Zass
Top achievements
Rank 1
answered on 11 Aug 2009, 03:17 PM
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.

0
Veselin Vasilev
Telerik team
answered on 14 Aug 2009, 08:28 AM
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.
0
Chanan Zass
Top achievements
Rank 1
answered on 14 Aug 2009, 10:04 AM
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.
0
Veselin Vasilev
Telerik team
answered on 14 Aug 2009, 11:11 AM
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.
0
Chanan Zass
Top achievements
Rank 1
answered on 14 Aug 2009, 01:30 PM
Will check this.
I'm using the 2009.1.527.35 version (Q1 2009).

I'll try with the latest version.

Many thanks, again.
0
Chanan Zass
Top achievements
Rank 1
answered on 17 Aug 2009, 10:16 AM
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.
Tags
ComboBox
Asked by
Joe
Top achievements
Rank 1
Answers by
Serrin
Top achievements
Rank 1
Joe
Top achievements
Rank 1
Veselin Vasilev
Telerik team
Chanan Zass
Top achievements
Rank 1
Share this question
or