Using the RadComboBox with checkboxes

6 posts, 1 answers
  1. Stephan
    Stephan avatar
    71 posts
    Member since:
    Jul 2007

    Posted 06 May 2009 Link to this post

    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
  2. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 06 May 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephan
    Stephan avatar
    71 posts
    Member since:
    Jul 2007

    Posted 06 May 2009 Link to this post

    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


  5. Answer
    Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 11 May 2009 Link to this post

    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.
  6. Balakrishna Reddy
    Balakrishna Reddy avatar
    37 posts
    Member since:
    Oct 2012

    Posted 13 Feb 2013 Link to this post

    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...
  7. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 18 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017