Radcombo With Multiple Check Box Selection.

5 posts, 0 answers
  1. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 03 Feb 2012 Link to this post

    Hi ALL,
           I have done multiple check box selection inside the Radcombobox using Javascript Please have one look it may help you in your project:

    JAVASCRIPT:
    <script type="text/javascript">
     function onCheckBoxClickClass(chk, combo) {
     
                    var combo;
                    if (combo == 'rcbClassGroup') {
                        combo = $find("<%= rcbClassGroup.ClientID %>");
                    }
     
                    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 chkMultipleSelectclass = $get(combo.get_id() + "_i" + i + "_chkMultipleSelectclass");
                        if (chkMultipleSelectclass.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("");
                    }
                }
     
                var cancelDropDownClosing = false;
     
                function removeLastComma(str) {
                    return str.replace(/,$/, "");
                }
     
                function StopPropagation(e) {
     
                    //cancel bubbling
                    e.cancelBubble = true;
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    }
                }
     
                function onDropDownClosing() {
                    cancelDropDownClosing = false;
                }
     
     
     
               function selectAllNodes(chk, combo, chkItem, ChkNone) {
     
                    var combo;
                    var combobox;
                    if (combo == 'rcbClassGroup') {
                        combobox = $find('<%=rcbClassGroup.ClientID %>');
                    }
     
     
                    var nestedCheckBox = combobox.get_items()._array;
                    for (var i = 0; i < nestedCheckBox.length; i++) {
                        var chk1 = $get(combobox.get_id() + "_i" + i + "_" + chkItem);
                        chk1.checked = chk.checked;
                    }
                    if (chk.checked && combo == 'rcbClassGroup')
                        onCheckBoxClickClass(chk, combo);
     
     
                    if (ChkNone != null) {
                        var chkNone = $get(combobox.get_id() + "_Header_" + ChkNone);
                        if (chkNone.checked)
                            chkNone.checked = false;
                    }
     
                    if (!chk.checked)
                        combobox.set_text("");
     
                }
    </script>

    HTML:
    <telerik:RadComboBox ID="rcbClassGroup" runat="server" AllowCustomText="true" SkinID="DropDownList298x200"
            Filter="Contains" EmptyMessage="--Select--" AutoPostBack="false" DataSourceID="test" DataTextField="Name" DataValueField="ID" >
            <HeaderTemplate>
                <asp:CheckBox ID="ChkClassroomGroup" runat="server" Text="Select All" AutoPostBack="false"
                    onClick="selectAllNodes(this,'rcbClassGroup','chkMultipleSelectclass',null)" />
            </HeaderTemplate>
            <ItemTemplate>
                <div onclick="StopPropagation(event)">
                    <asp:CheckBox ID="chkMultipleSelectclass" runat="server" Text='<%#Eval("Name") %>'
                        AutoPostBack="false" onclick="onCheckBoxClickClass(this,'rcbClassGroup')" />
                </div>
            </ItemTemplate>
        </telerik:RadComboBox>
        <asp:XmlDataSource ID="test" DataFile="../XMLFiles/RadCombo.xml" runat="server"></asp:XmlDataSource>

    Let me know if any issue.

    Thanks,
    Abhishek K 
  2. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 07 Feb 2012 Link to this post

    Hi Abhishek,

    The RadComboBox has a built-in CheckBox functionality which is enabled by setting its CheckBoxes property to true. For more information take a look at the online demo: RadComboBox / CheckBoxes.

    Greetings,
    Ivana
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 09 Feb 2012 Link to this post

    Hello Ivana,

    I had one issue with as you posted in above demo link.
    http://www.telerik.com/community/forums/aspnet-ajax/combobox/checkall-checkbox-in-radcombobox-should-not-clear-other-checkbox-when-click-on-text.aspx
      So that i went through this logic Temporarily.
    I am waiting for reply of Kalina.


    Thanks,
    Abhishek K
  5. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 14 Feb 2012 Link to this post

    Hi Abhishek,

    Currently we are researching for the best approach for defining the checkbox behaviour upon text click, but I am afraid that this will take us some more time.
    I will update this forum thread once we find out something of interest.

    Regards,
    Kalina
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 14 Feb 2012 Link to this post

    Hello Kalina,

    Thanks for your support, ill wait for your solution.

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