locked
How I select/unselect multiple items in a drop-down (in Aspx VB) RRS feed

  • Question

  • User-582711651 posted

    Hi Friends, 

    I have gone through many websites and tried examples also but am not satisfied, I want to add multiple items in a drop-down control simply without any cosmetic/CSS, I expecting like Sample_Image (no need to select all check on top) I can individually select rows items or unselect row items, 

    Thanks in advance. 

    Monday, October 1, 2018 10:10 AM

Answers

  • User283571144 posted

    Hi ayyappan.CNN,

    Nice, moreover, the second example is suitable for me, but after the postback, all checked items had been getting lost (i.e all checked has been removed automatically) and I expect support in Dropdown, not DIV, inputs ... etc., please. 

    As far as I know, there are no build-in dropdown support checkbox, we could only modify it by using javascript and css.

    If you want to keep the selected value inside the multiple selected, I suggest you could add the " runat="server"" in the checkbox, then it will work well.

    More details, you could refer to below codes sample:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MultipleSelectDDL.aspx.cs" Inherits="EmptyWebFormTest.MultipleSelectDDL" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            var expanded = false;
    
            function showCheckboxes() {
                var checkboxes = document.getElementById("checkboxes");
                if (!expanded) {
                    checkboxes.style.display = "block";
                    expanded = true;
                } else {
                    checkboxes.style.display = "none";
                    expanded = false;
                }
            }
        </script>
        <style>
            .multiselect {
                width: 200px;
            }
    
            .selectBox {
                ;
            }
    
                .selectBox select {
                    width: 100%;
                    font-weight: bold;
                }
    
            .overSelect {
                ;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }
    
            #checkboxes {
                display: none;
                border: 1px #dadada solid;
            }
    
                #checkboxes label {
                    display: block;
                }
    
                    #checkboxes label:hover {
                        background-color: #1e90ff;
                    }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div class="multiselect">
                    <div class="selectBox" onclick="showCheckboxes()">
                        <select>
                            <option>Select an option</option>
                        </select>
                        <div class="overSelect"></div>
                    </div>
                    <div id="checkboxes">
                        <label for="one">
                            <input type="checkbox" id="one"  runat="server" />First checkbox</label>
                        <label for="two">
                            <input type="checkbox" id="two" runat="server" />Second checkbox</label>
                        <label for="three">
                            <input type="checkbox" id="three" runat="server" />Third checkbox</label>
                    </div>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                 </div>
            </div>
        </form>
    </body>
    </html>
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 8, 2018 2:10 AM

All replies

  • User475983607 posted

    I have gone through many websites and tried examples also but am not satisfied, I want to add multiple items in a drop-down control simply without any cosmetic/CSS, I expecting like Sample_Image (no need to select all check on top) I can individually select rows items or unselect row items

    The ASP.NET ListBox server control controls allows multiple selected items out-of-the-bow.  The browser renders select elements If you want UI that is anything other than what the browser offers, a CSS/JS API is required.  

    <asp:ListBox ID="ListBox1" runat="server" SelectionMode=Multiple></asp:ListBox>

    The "not satisfied" requirement is not specific enough to know what satisfies the requirement.  I'm confident that you capable to do an internet search.

    https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/

    Monday, October 1, 2018 11:17 AM
  • User283571144 posted

    Hi ayyappan.CNN,

    As far as I know, there is no default mutliple select checkbox without using any javascript or css in asp.net web form.

    If you don't want to include any css or javascript reference, I suggest you could consider using telerik's ComboBox.

    More details, you could refer to below codes:

    <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.CheckBoxes.DefaultCS"Language="c#"  %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
     
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
            <div class="demo-container size-medium">
                <div class="combobox-wraper">
                    <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" 
                        Width="400" Label="Select book genres:">
                        <Items>
                            <telerik:RadComboBoxItem Text="Arts" />
                            <telerik:RadComboBoxItem Text="Biographies" />
                            <telerik:RadComboBoxItem Text="Children's Books" />
                            <telerik:RadComboBoxItem Text="Computers &amp; Internet" />
                            <telerik:RadComboBoxItem Text="Cooking" />
                            <telerik:RadComboBoxItem Text="History" />
                            <telerik:RadComboBoxItem Text="Fiction" />
                            <telerik:RadComboBoxItem Text="Mystery" />
                            <telerik:RadComboBoxItem Text="Nonfiction" />
                            <telerik:RadComboBoxItem Text="Romance" />
                            <telerik:RadComboBoxItem Text="Science Fiction" />
                            <telerik:RadComboBoxItem Text="Travel" />
                        </Items>
                    </telerik:RadComboBox>
                    <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" Text="Get Checked Items" OnClick="Button1_Click"  />
                </div>
                <asp:Literal ID="itemsClientSide" runat="server" />
            </div>
        </telerik:RadAjaxPanel>
        </form>
    </body>
    </html>

    Link:https://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx?show-source=true

    But, we could create it by using css or javascript like below exmaple:

    var expanded = false;
    
    function showCheckboxes() {
      var checkboxes = document.getElementById("checkboxes");
      if (!expanded) {
        checkboxes.style.display = "block";
        expanded = true;
      } else {
        checkboxes.style.display = "none";
        expanded = false;
      }
    }
    .multiselect {
      width: 200px;
    }
    
    .selectBox {
      ;
    }
    
    .selectBox select {
      width: 100%;
      font-weight: bold;
    }
    
    .overSelect {
      ;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    
    #checkboxes {
      display: none;
      border: 1px #dadada solid;
    }
    
    #checkboxes label {
      display: block;
    }
    
    #checkboxes label:hover {
      background-color: #1e90ff;
    }
    <form>
      <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
          <select>
            <option>Select an option</option>
          </select>
          <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
          <label for="one">
            <input type="checkbox" id="one" />First checkbox</label>
          <label for="two">
            <input type="checkbox" id="two" />Second checkbox</label>
          <label for="three">
            <input type="checkbox" id="three" />Third checkbox</label>
        </div>
      </div>
    </form>

    Best Regards,

    Brando

    Tuesday, October 2, 2018 5:45 AM
  • User-582711651 posted

    Hi Brando ZWZ, 

    Nice, moreover, the second example is suitable for me, but after the postback, all checked items had been getting lost (i.e all checked has been removed automatically) and I expect support in Dropdown, not DIV, inputs ... etc., please. 

    Thanks in advance. 

    Tuesday, October 2, 2018 3:52 PM
  • User475983607 posted

    The check boxes require a name attribute otherwise the browser will not send the values as there's no name to go with the value.  Use server controls if ASP.NET state management is required.

    Lastly, post the source code if you are still having trouble.

    Tuesday, October 2, 2018 3:57 PM
  • User-582711651 posted

    Hi, 

    Noted, Based on this only I have to develop further, hence please share few examples.

    Thanks in advance.

    Sunday, October 7, 2018 5:26 AM
  • User283571144 posted

    Hi ayyappan.CNN,

    Nice, moreover, the second example is suitable for me, but after the postback, all checked items had been getting lost (i.e all checked has been removed automatically) and I expect support in Dropdown, not DIV, inputs ... etc., please. 

    As far as I know, there are no build-in dropdown support checkbox, we could only modify it by using javascript and css.

    If you want to keep the selected value inside the multiple selected, I suggest you could add the " runat="server"" in the checkbox, then it will work well.

    More details, you could refer to below codes sample:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MultipleSelectDDL.aspx.cs" Inherits="EmptyWebFormTest.MultipleSelectDDL" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            var expanded = false;
    
            function showCheckboxes() {
                var checkboxes = document.getElementById("checkboxes");
                if (!expanded) {
                    checkboxes.style.display = "block";
                    expanded = true;
                } else {
                    checkboxes.style.display = "none";
                    expanded = false;
                }
            }
        </script>
        <style>
            .multiselect {
                width: 200px;
            }
    
            .selectBox {
                ;
            }
    
                .selectBox select {
                    width: 100%;
                    font-weight: bold;
                }
    
            .overSelect {
                ;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }
    
            #checkboxes {
                display: none;
                border: 1px #dadada solid;
            }
    
                #checkboxes label {
                    display: block;
                }
    
                    #checkboxes label:hover {
                        background-color: #1e90ff;
                    }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div class="multiselect">
                    <div class="selectBox" onclick="showCheckboxes()">
                        <select>
                            <option>Select an option</option>
                        </select>
                        <div class="overSelect"></div>
                    </div>
                    <div id="checkboxes">
                        <label for="one">
                            <input type="checkbox" id="one"  runat="server" />First checkbox</label>
                        <label for="two">
                            <input type="checkbox" id="two" runat="server" />Second checkbox</label>
                        <label for="three">
                            <input type="checkbox" id="three" runat="server" />Third checkbox</label>
                    </div>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                 </div>
            </div>
        </form>
    </body>
    </html>
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 8, 2018 2:10 AM
  • User-582711651 posted

    Hi,

    Good, I'll start my project with this code, also help me how I get (single/multiple) values from checkbox (possible share your code in vb.net)? 

    Thanks in advance. 

    Saturday, October 13, 2018 6:09 AM