Support for Muli-select with checkboxes?

[Joe]

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.

[Serrin]

Hey Joe,

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

Using CheckBoxes in ComboBox

:)

[Joe]

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.

[Veselin Vasilev]

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.

[Joe]

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>

 

 

[Veselin Vasilev]

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.

[Joe]

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.

[Veselin Vasilev]

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.

[Chanan Zass]

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.

[Veselin Vasilev]

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.

[Chanan Zass]

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.

[Veselin Vasilev]

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.

[Chanan Zass]

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

I'll try with the latest version.

Many thanks, again.

[Chanan Zass]

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.