Using the RadComboBox with checkboxes

[Stephan]

Hi, could you provide me with an example for the next scenario:

I want to have a combobox populated with items from a Db. The items should all have a checkbox which initially is checked. The user can check or uncheck the boxes if necessary. On postbacks I want to check which items are checked. I have an example which is static, but I can easily replace it with dynamic items. The main "problem" I have, when checking items, the RadComboxBox shows the items in the "TextBox" which is displayed at the top of the RadComboBox (next to the arrow). How can I initially set the value for this "TextBox" and also how can I disable this "TextBox" so users cannot type anything (I tries Allowcustomtext=disabled), because the users are only to allowed to select items which are in the list.

I.e. the list is populated which names of persons, initially I want to have all the names checked and the "TextBox" should say: "Selected all". As described before, the user can select or deselect persons. If not all items are selected, the "TextBox" should show the list of persons who are checked, separated by a comma.

I hope I made myself clear. How will I accomplice this, and is the state maintained in postbacks. I'm using a AJAX-fied webapplication

[Veselin Vasilev]

Hello Stephan,

Please check the Templates demo of the combobox. It has most of your requirements.
To disable user input in the text area of the combo - you need to set the AllowCustomText="False".
 

Best wishes,
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.

[Stephan]

Hi Vesline,

I was able to create a webusercontrol based on the exmple, however I just need one more thing. I want to postback the page when the user closes the RadComboBox. I saw this example how to postback, but when I use it like this, I recieve an javascript exception.

Have a look a the code I use:

    function onDropDownClosing() {
        //alert("PostBack");
        cancelDropDownClosing = false;
        window["<%= rcbItems.ClientID %>"].AjaxRequest("<%= this.UniqueID %>", "");
    }

I have an Ajax-manager on the masterpage. The page has a webusercontrol, this usercontrols contains the RadComboBox with checkboxes. It all works fine. But as said, I want to postback when the dropdown is closed (a kind of postback when the selected index is changed, but since I use checkboxes, this is not a good solution, that is why I want to postback when the user closes the dropdownlist).

the errow which is thrown;
Error: window.ctl00_cphMain_rcbPattern_rcbItems is undefined
Source File: http://localhost:64850/WebSite/Observation/listObservation.aspx
Line: 1268

When I check the Html-output I am able to find the ctl00_cphMain_rcbPattern_rcbItems so, what I'm I missing

sourcecode of the entier control:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RadComboWithCheckBox.ascx.cs"
    Inherits="UserControls_Common_RadComboWithCheckBox" %>
<telerik:RadComboBox ID="rcbItems" runat="server" HighlightTemplatedItems="true"
    AllowCustomText="true" Width="240px" SkinID="ChooseClientPart"
    OnClientDropDownClosed="onDropDownClosing"
    onitemdatabound="rcbItems_ItemDataBound">
    <ItemTemplate>
        <div onclick="StopPropagation(event)" class="combo-item-template">
            <asp:CheckBox runat="server" ID="cbxItem" Checked="true" onclick="onCheckBoxClick(this)"  />
            <asp:Label runat="server" ID="lblItem" AssociatedControlID="cbxItem">
             <%# Eval("Value") %>
            </asp:Label>
        </div>
    </ItemTemplate>
</telerik:RadComboBox>

<script type="text/javascript">
    /* <![CDATA[ */
    var cancelDropDownClosing = false;

    function StopPropagation(e) {
        //cancel bubbling
        e.cancelBubble = true;
        if (e.stopPropagation) {
            e.stopPropagation();
        }
    }

    function onDropDownClosing() {
        //alert("PostBack");
        cancelDropDownClosing = false;
        window["<%= rcbItems.ClientID %>"].AjaxRequest("<%= this.UniqueID %>", "");
    }

    function onCheckBoxClick(chk) {
        var combo = $find("<%= rcbItems.ClientID %>");
        //prevent second combo from closing
        cancelDropDownClosing = true;
        //holds the text of all checked items
        var text = "";
        //holds the values of all checked items
        var values = "";
        //get the collection of all items
        var items = combo.get_items();
        //enumerate all items
        for (var i = 0; i < items.get_count(); i++) {
            var item = items.getItem(i);
            //get the checkbox element of the current item
            var chk1 = $get(combo.get_id() + "_i" + i + "_cbxItem");
            if (chk1.checked) {
                text += item.get_text() + ",";
                values += item.get_value() + ",";
            }
        }
        //remove the last comma from the string
        text = removeLastComma(text);
        values = removeLastComma(values);

        if (text.length > 0) {
            //set the text of the combobox
            combo.set_text(text);
        }
        else {
            //all checkboxes are unchecked
            //so reset the controls
            combo.set_text("");
        }
    }


    //this method removes the ending comma from a string
    function removeLastComma(str) {
        return str.replace(/,$/, "");
    }

    function OnClientDropDownClosingHandler(sender, e) {
        //do not close the second combo if
        //a checkbox from the first is clicked
        e.set_cancel(cancelDropDownClosing);
    }
    /* ]]> */
</script>

Thanks

[Veselin Vasilev]

Hello Stephan,

The help article you found is for the "classic" RadControls and that is why you got the error.

To make an Ajax request on dropdown closing you can subscribe to the OnClientDropDownClosed event, find the RadAjaxManager on the page and call its ajaxRequest method.

Let me know if this helps.

Greetings,
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.

[Balakrishna Reddy]

Hi All,

 <telerik:RadComboBox runat="server" ID="rcbCity"  
                AutoPostBack="true">
              
                <ItemTemplate>
                    <asp:CheckBox ID="cbxItem" runat="server" />
                    <asp:Label runat="server" ID="lblItem"> <%--Text='<%# Eval("CIT_Name") %>' AssociatedControlID="cbxItem">
             <%# Eval("CIT_Name") %>
            </asp:Label>
                </ItemTemplate>
            </telerik:RadComboBox>

and i am binding dynamically..i am getting only check boxes not text.please help me...

[Nencho]

Hi Balakrishna,

Please make sure that your datasource has "CIT_Name". Try to use Text='<%# Eval("CIT_Name") %>':

<telerik:RadComboBox runat="server" ID="rcbCity"
    AutoPostBack="true">
    <ItemTemplate>
        <asp:CheckBox ID="cbxItem" runat="server" />
        <asp:Label runat="server" ID="lblItem" AssociatedControlID="cbxItem" Text='<%# Eval("CIT_Name") %>'>
        </asp:Label>
    </ItemTemplate>
    <Items>
        <telerik:RadComboBoxItem />
    </Items>
</telerik:RadComboBox>

I'm attaching small sample for your reference. Note that dll files are removed.

Kind regards,
Nencho
the Telerik team