Checkboxlist with textbox displayed in dropdownlist style angularjs[Answered] RSS

• • Reply
  asplearning

  Member

  429 Points

  1829 Posts

  Checkboxlist with textbox displayed in dropdownlist style angularjs

  Mar 07, 2019 02:04 AM|asplearning|LINK

  Hello everyone, I have this requirement that I need a dropdown list that allows multiple selection as well as a textbox to enter quantity for each check. In a way it's checkboxlist with a textbox next to each checkbox. The textbox is disabled until the checkbox next to it is checked.

  I can create that just fine. But the problem is when there are many items and list is too long. So I need the checkboxlist to be displayed in a dropdown list style.  The dropdown list is similar to this one:

  https://angular-ui.github.io/ui-select/demo-multiple-selection.html

  Any ideas how this can be done? 

  Thanks. 

• • Reply
  asplearning

  Member

  429 Points

  1829 Posts

  Re: Checkboxlist with textbox displayed in dropdownlist style angularjs

  Mar 07, 2019 02:24 AM|asplearning|LINK

  After some searching, I found bootstrap multiselect is very close to what I want to do :

  https://github.com/davidstutz/bootstrap-multiselect

  But there seems no way I can have a textbox next to each item. Anybody could help?

• • Reply
  Fei Han - MS...

  All-Star

  40565 Points

  6233 Posts

  Microsoft

  Re: Checkboxlist with textbox displayed in dropdownlist style angularjs

  Mar 07, 2019 07:44 AM|Fei Han - MSFT|LINK

  Hi asplearning,

  asplearning

  After some searching, I found bootstrap multiselect is very close to what I want to do :

  https://github.com/davidstutz/bootstrap-multiselect

  But there seems no way I can have a textbox next to each item. Anybody could help?

  In [bootstrap-multiselect documentation](http://davidstutz.de/bootstrap-multiselect/#templates), we can find that it provides templates option for us to control the generated HTML markup. To append/display a TextBox next to each item, you can refer to the following code sample.

  <select id="example-getting-started" multiple="multiple">
      <option value="cheese">Cheese</option>
      <option value="tomatoes">Tomatoes</option>
      <option value="onions">Onions</option>
  </select>

  <script>
      $(document).ready(function () {
          $('#example-getting-started').multiselect({
              templates: {
                  li: '<li><a><label style="display:inline;"></label><input type="text" class="txt_quantity_style" disabled/></a></li>'
              },
              onChange: function (option, checked) {
                  if (checked) {
                      var input_id = "input[id='" + $(option).val() + "_quantity']";
                      $(input_id).removeAttr("disabled");
                  } else {
                      var input_id = "input[id='" + $(option).val() + "_quantity']";
                      $(input_id).prop("disabled", true);
                  }
              }
          });
  
          $("ul.multiselect-container li a label.checkbox").each(function (index) {
              $(this).next("input[type='text']").prop("id", $(this).attr("title").toLowerCase() + "_quantity");
          });
      });
  </script>

  <style>
      .txt_quantity_style{
          color:black;
      }
  </style>

  Test Result:

  

  With Regards,

  Fei Han

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
• • Reply
  asplearning

  Member

  429 Points

  1829 Posts

  Re: Checkboxlist with textbox displayed in dropdownlist style angularjs

  Mar 07, 2019 08:12 PM|asplearning|LINK

  Thank you Fei Han for that. That's very helpful. Just wondering if it's possible to display the number next to each selection. so it will display:

  Tomatoes 12 Mangoes 2 and so on. 

• • Reply
  Fei Han - MS...

  All-Star

  40565 Points

  6233 Posts

  Microsoft

  Re: Checkboxlist with textbox displayed in dropdownlist style angularjs

  Mar 08, 2019 03:15 AM|Fei Han - MSFT|LINK

  Hi asplearning,

  asplearning

  Thank you Fei Han for that. That's very helpful. Just wondering if it's possible to display the number next to each selection. so it will display:

  Tomatoes 12 Mangoes 2 and so on. 

  Based on your requirement, I updated the code, please refer to it.

  <script>
      $(document).ready(function () {
          $('#example-getting-started').multiselect({
              templates: {
                  li: '<li><a><label style="display:inline;"></label><input type="text" class="txt_quantity_style" disabled/></a></li>'
              },
              onChange: function (option, checked) {
                  var input_id = "input[id='" + $(option).val() + "_quantity']";
                  if (checked) {
                      
                      $(input_id).removeAttr("disabled");
                  } else {
                      $(input_id).prop("disabled", true);
                  }
              }
          });
  
          $("ul.multiselect-container li a label.checkbox").each(function (index) {
              $(this).next("input[type='text']").prop("id", $(this).attr("title").toLowerCase() + "_quantity");
          });
  
          $("input.txt_quantity_style").bind("blur", function () {
  
              var txt_n = $(this).val();
  
              Resetselectedtext();
          })
      });
  
      function Resetselectedtext() {
          var res = "";
  
          var txt_st = $("button.multiselect").prop("title");
  
          $("ul.multiselect-container li.active").each(function () {
              var n = $(this).find("input[type='text']").val() == "" ? 0 : parseFloat($(this).find("input[type='text']").val());
              res += $(this).find("label").prop("title") + " " + n + ",";
          });
          
          $("span.multiselect-selected-text").text(res);
      }
  </script>

  Test Result:

  

  Besides, if you have further question/feedback about customized functionalities with bootstrap-multiselect, you can create issue to report it on github.

  https://github.com/davidstutz/bootstrap-multiselect/issues 

  With Regards,

  Fei Han

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.