jQWidgets Forums
jQuery UI Widgets › Forums › Lists › ComboBox › Remove Item from MultiSelect
Tagged: combobox
This topic contains 7 replies, has 3 voices, and was last updated by Peter Stoev 11 years, 7 months ago.
-
Author
-
I have the following code which I’m using to populate a number of multi-select combos on the fly.
I get the remove X icon but it doesn’t workAlso the icons aren’t rendered until all of the API calls are complete.
Do i need to do anything to make the remove work?
this is all done within the following loop…….
@foreach (var property in environment.Properties)
<div id="dropDownList"> @{ var comboId = string.Format("propertyValueDropDown{0}{1}", environment.Id, property.Id); } <div style="margin-top: 5px;" id="@comboId"> </div> <script type="text/javascript"> $(document).ready(function () { var url = "../api/AdditionalPropertyValue/GetAdditionalPropertyValueByEnvironmentAndProperty?environmentId=@environment.Id&propertyId=@property.Id"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'Id' }, { name: 'value' } ], url: url, async: true }; var dataAdapter = new $.jqx.dataAdapter(source); $("#@comboId").jqxComboBox({ source: dataAdapter, displayMember: "value", valueMember: "Id", multiSelect: true, width: 200, height: 25, autoDropDownHeight: true, dropDownWidth: 400 }); $('#@comboId').on('select', function(event) { $("#@comboId").jqxComboBox("close"); }); $('#@comboId').on('click', function(event) { $("#@comboId").jqxComboBox("open"); }); }); </script> </div>
Hi srosam,
In case you wish someone to test your scenario, then provide a full sample which can be used for local testing and debugging. In addition, you can also provide information about the jQWidgets and jQuery version that you use.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comhi. thanks for the quick reply.
i got it working.
this works.
@using System.Collections.Generic<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title id='Description'> This sample illustrates the Multi Select feature of jqxComboBox. That feature allows the selection of multiple values from jqxComboBox. </title> <link rel="stylesheet" href="/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/gettheme.js"></script> <script type="text/javascript" src="/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/jqx-all.js"></script></head> <body> @foreach (var i in new List<int> {1, 2, 3, 4, 5, 6, 7, 8, 9}) { var jqComboId = i + "combobox"; <div id='content'> <script type="text/javascript"> $(document).ready(function() { var theme = ""; var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"); // Create a jqxComboBox $("#@jqComboId").jqxComboBox({ source: countries, multiSelect: true, width: 350, height: 25, theme: theme }); $("#@jqComboId").jqxComboBox('selectItem', 'United States'); $("#@jqComboId").jqxComboBox('selectItem', 'Germany'); }); </script> <span style="font-size: 13px; font-family: Verdana;">Select countries</span> <div style="margin-top: 5px;" id='@jqComboId'> </div> </div> } </body></html>
I was too quick to post.. The above IS working..
But when i use an api call to populate the data it dosent work.
I can not click the X to remove an item….@using System.Collections.Generic<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title id='Description'> This sample illustrates the Multi Select feature of jqxComboBox. That feature allows the selection of multiple values from jqxComboBox. </title> <link rel="stylesheet" href="/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/gettheme.js"></script> <script type="text/javascript" src="/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/jqx-all.js"></script></head> <body> @foreach (var i in new List<int> {1, 2, 3, 4, 5, 6, 7, 8, 9}) { var jqComboId = i + "combobox"; <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = ""; var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"); var url = "http://json-generator.appspot.com/j/coQyuBgQWG?indent=4"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'id' }, { name: 'gender' } ], url: url, async: true }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#@jqComboId").jqxComboBox({ source: dataAdapter, multiSelect: true, width: 350, height: 25, theme: theme, displayMember: "gender", valueMember: "id" }); $("#@jqComboId").jqxComboBox('selectItem', 'United States'); $("#@jqComboId").jqxComboBox('selectItem', 'Germany'); }); </script> <span style="font-size: 13px; font-family: Verdana;">Select countries</span> <div style="margin-top: 5px;" id='@jqComboId'> </div> </div> } </body></html>
Hi srosam,
I see that you use AJAX for binding, but keep in mind that at the point you call $(“#@jqComboId”).jqxComboBox(‘selectItem’, ‘United States’);. the Widget would not still be loaded with data so there would be no selection. So the solution would be to either call the “selectItem” when the binding is completed or to use Synchronous Ajax calls.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comPeter, I have tried with async set to false, same result.
I didnt mean to leave those ‘selectItem’ lines in.. i have removed them now.
Note that i am able to get data into my multiselect.
The issue is that i cannot remove the data items that i have selected..[img]image[/img]
Hi,
I am also having the same problem with removing selected item from multi-select combo box.
In the demo which you are provided is working fine. You are using an array of values to bind to combo box.See the below code of you and mine.
Same example, if I bind with value member and display member, I am unable to remove the selected item.function ComboboxDemo() { var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"); // Create a jqxComboBox $("#jqxComboBox").jqxComboBox({ source: countries, multiSelect: true, width: 350, height: 25, theme: 'arctic' }); $("#jqxComboBox").jqxComboBox('selectItem', 'United States'); $("#jqxComboBox").jqxComboBox('selectItem', 'Germany'); }
Modified code
function ComboboxDemo1() { var _countries = new Array(); _countries = [{ "ID": 1, "Name": "A" }, { "ID": 2, "Name": "B" }, { "ID": 3, "Name": "C" }, { "ID": 4, "Name": "E" } ]; // Create a jqxComboBox $("#jqxComboBox").jqxComboBox({ source: _countries, multiSelect: true, width: 350, displayMember: 'Name', valueMember: 'ID', height: 25, theme: 'arctic' }); }
UI:
<div style="margin-top: 5px;" id='jqxComboBox'>
Am I doing any thing wrong?
Can you please suggest me.Regards,
KiranHi Kiran Ch,
Thanks you for the feedback!
We will test the provided code and if we find out that there’s something wrong on our side, we will do our best to resolve it for jQWidgets 3.1.0.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.