Using CheckBoxes for multi-item selection, complete solution.

Thread is closed for posting
6 posts, 0 answers
  1. EE6BA259-C1C3-47B3-9647-CF02C8F33B19
    EE6BA259-C1C3-47B3-9647-CF02C8F33B19 avatar
    21 posts
    Member since:
    Nov 2006

    Posted 22 Apr 2009 Link to this post

    Requirements
    RadControls version

     

    RadControls for ASPNET AJAX
    .NET version

     

    3.5
    Visual Studio version

     

    2008
    programming language

     

    VB.NET
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    This example shows a ComboxBox that allows multiple selections by using CheckBoxes in the ComboBox template. There were many examples on the site but none had all of the features I was looking for. What I needed was a drop down that allows multiple selections from only the options provided to the user.

    This example features is a ComboBox that does the following.
    • Allows multiple selection with checkboxes
    • Restricts user from inputting data via Keyboard
    • Restricts user from inputting data via Copy, Cut & Paste
    • Restricts user from changing value with keyboard Up/Down arrows
    • Shows summary of selected items in CheckBox text (ie OptionA, OptionB, OptionC) when checked
    • Selected Values can be retrieved from code behind
    • Works using one set of Javascript functions by passing control ID parameters (some other examples use unique functions for each ComboBox on the page, this example is generic)
    • Also included is one way of checking a box by supplying a list of values

    This example was created partially from other solutions.
  3. 482875E5-108F-4FC0-A5A4-EC8B56D0B361
    482875E5-108F-4FC0-A5A4-EC8B56D0B361 avatar
    45 posts
    Member since:
    Apr 2008

    Posted 03 Jun 2009 Link to this post

    Thanks, here's the C# version. 

    I was looking for a solution for messaging...just like when you send messages in MySpace (only limit to your "friends" but I need to show the names and be able to easily delete the recipients).  This is a good starting point for me.  Thanks for sharing the code.

    Also, I was going to attach the file, but there's no way to upload it in reply.

    ASPX
    <a href="checkbox.aspx">start over</a>      
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        </telerik:RadScriptManager> 
        <div> 
            <br /> 
            <table style="width: 100%">  
                <tr> 
                    <td> 
                        cbo 1  
                    </td> 
                    <td> 
                        <telerik:RadComboBox ID="rcbMyList1" runat="server" oncopy="return false;" onpaste="return false;" 
                            DataSourceID="SqlDataSource1" DataTextField="firstname" DataValueField="emailaddress" 
                            oncut="return false;" onkeypress="return tabOnly(event)" onmousewheel="return false" 
                            OnClientDropDownOpening="OnClientDropDownOpening" OnClientDropDownClosing="OnClientDropDownClosing" 
                            OnClientSelectedIndexChanging="OnClientSelectedIndexChanging" OnClientBlur="OnClientBlur" 
                            Width="200px" AllowCustomText="True" ChangeTextOnKeyBoardNavigation="False" AutoPostBack="true">  
                            <ItemTemplate> 
                                <asp:CheckBox ID="CheckBox1" runat="server" Text='<%# Eval("emailaddress") %>' /> 
                            </ItemTemplate> 
                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
                        </telerik:RadComboBox> 
                    </td> 
                </tr> 
                <tr> 
                    <td> 
                        cbo 2  
                    </td> 
                    <td> 
                        <telerik:RadComboBox ID="rcbMyList2" runat="server" oncopy="return false;" onpaste="return false;" 
                            oncut="return false;" onkeypress="return tabOnly(event)" onmousewheel="return false" 
                            OnClientDropDownOpening="OnClientDropDownOpening" OnClientDropDownClosing="OnClientDropDownClosing" 
                            OnClientSelectedIndexChanging="OnClientSelectedIndexChanging" OnClientBlur="OnClientBlur" 
                            Width="200px" AllowCustomText="True" ChangeTextOnKeyBoardNavigation="False" 
                            DataSourceID="SqlDataSource1" DataTextField="firstname" DataValueField="emailaddress">  
                            <ItemTemplate> 
                                <asp:CheckBox ID="CheckBox1" runat="server" Text='<%# Eval("emailaddress") %>' /> 
                            </ItemTemplate> 
                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
                        </telerik:RadComboBox> 
                    </td> 
                </tr> 
                <tr> 
                    <td> 
                        &nbsp;  
                    </td> 
                    <td> 
                        <asp:Button ID="Button1" runat="server" Text="GetValues" /> 
                    </td> 
                </tr> 
                <tr> 
                    <td nowrap>Results 1</td> 
                    <td><asp:Label ID="Label1" runat="server"></asp:Label></td>  
                </tr> 
                <tr> 
                    <td>Results 2</td> 
                    <td> 
                        <asp:Label ID="Label2" runat="server"></asp:Label> 
                    </td> 
                </tr> 
     
            </table> 
              
    <hr /><div>  
    Set values to cbo 1<asp:TextBox ID="TextBox1" runat="server" Width="100%">catherine0@adventure-works.com, syed0@adventure-works.com, kim7@adventure-works.com</asp:TextBox> 
     
    <asp:Button ID="Button2" runat="server" Text="SetValues" /> 
    </div> 
        </div> 
          
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
        SelectCommand="SELECT top 30 contactid, firstname, middlename, lastname, emailaddress, phone FROM Person.Contact order by lastname">  
    </asp:SqlDataSource> 

    CODE BEHIND

     
            private string GetCheckBoxValues(Telerik.Web.UI.RadComboBox cbo)  
            {  
                string sValues = "";  
                //foreach (RadComboBoxItem item in cbo)  
                for (int x=0; x<cbo.Items.Count; x++)  
                {  
                    if ((cbo.Items[x].FindControl("CheckBox1") as CheckBox).Checked)  
                    {  
                        sValues += "," + cbo.Items[x].Value;  
                    }  
                }  
                if (sValues != "")  
                    sValuessValues = sValues.Substring(1);  
     
                return sValues;  
            }  
     
            protected override void OnInit(EventArgs e)  
            {  
                Button1.Click += new EventHandler(Button1_Click);  
                Button2.Click += new EventHandler(Button2_Click);  
                rcbMyList1.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(rcbMyList1_SelectedIndexChanged);  
                base.OnInit(e);  
            }  
     
            void rcbMyList1_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)  
            {  
                Label1.Text = GetCheckBoxValues(rcbMyList1);  
            }  
     
            void Button2_Click(object sender, EventArgs e)  
            {  
                string[] sEmails = TextBox1.Text.Split(",".ToCharArray());  
                int x;  
                int y;  
     
                for (x = 0; x < rcbMyList1.Items.Count; x++)  
                {  
                    for (y = 0; y < sEmails.Length; y++)  
                    {  
                        //  
                        //default: unchecked  
                        (rcbMyList1.Items[x].FindControl("CheckBox1") as CheckBox).Checked = false;  
                          
                        if (rcbMyList1.Items[x].Value == sEmails[y].Trim())  
                        {  
                            (rcbMyList1.Items[x].FindControl("CheckBox1") as CheckBox).Checked = true;  
                            break;  
                        }  
                    }  
                }  
            }  
     
     
     
            void Button1_Click(object sender, EventArgs e)  
            {  
                Label1.Text = GetCheckBoxValues(rcbMyList1);  
                Label2.Text = GetCheckBoxValues(rcbMyList2);  
            } 
  5. EE6BA259-C1C3-47B3-9647-CF02C8F33B19
    EE6BA259-C1C3-47B3-9647-CF02C8F33B19 avatar
    21 posts
    Member since:
    Nov 2006

    Posted 04 Jun 2009 Link to this post

    Scott,

    Thanks for the feedback. It's nice to know the code was helpful to you.
  7. 86EBC6AB-D148-4DF6-AD5F-57722D6C56AF
    86EBC6AB-D148-4DF6-AD5F-57722D6C56AF avatar
    1 posts
    Member since:
    Jul 2009

    Posted 13 Jul 2009 Link to this post

    Hi Scott,

             I have a small query regarding this multi selection on Combo Box. First let me explain my scenario - In my scenario I need to select multiple values from a combo box and store it in database (I used "," delimiter to store). But while retrieving the values from the database I need to reassign the values in the combo box which are coming from the database. Is this scenario is work around. If so can you please provide me an example.

    Thanks,

    Dheeraj Kumar.
  9. AB3270C4-25FC-4795-BF46-D579353BDB68
    AB3270C4-25FC-4795-BF46-D579353BDB68 avatar
    5 posts
    Member since:
    Nov 2008

    Posted 24 Mar 2010 Link to this post

    Thanks for perfect solution.

    its perfectly restricting users to cut,paste text, and inputting custom text in input. but fails with backspace and delete buttons

    Can you please tell us, how can we restrict users to delete text using backspace or delete button?
    I am using IE8, Windows 7
  11. EE6BA259-C1C3-47B3-9647-CF02C8F33B19
    EE6BA259-C1C3-47B3-9647-CF02C8F33B19 avatar
    21 posts
    Member since:
    Nov 2006

    Posted 24 Mar 2010 Link to this post

    Here is some javascript that might get you started in the right direction. Below is code that stops a user from pressing the ENTER key on the entire document (document.onkeypress). You could modify this to block any key you like by changing the keyCode == <value> to the desired key, in your case backspace and delete.

    You would need to attach this javascript to the onkeypress event of each RadComboBox that requires these inputs to be blocked.

    Sorry I don't have time to build a solution and test it, but this should work.

     <script type="text/javascript"> 
            // Work around browser behavior of "auto-submitting" simple forms 
            function stopRKey(evt) { 
                var evt = (evt) ? evt : ((event) ? event : null); 
                var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
                if ((evt.keyCode == 13) && (node.type == "text") || (evt.keyCode == 13) && (node.type == "password")) { return false; } 
            } 
            document.onkeypress = stopRKey; 
     
        </script> 

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.