The basic problem: selecting a few items from a list of thousands.
The potential solution:
I have an autocomplete field that searches the db, and returns a name/id pair. This is working fine.
The next step is to preserve the selected IDs, and allow the user to remove some if needed. For this, I've been looking at using a select, and was hoping a UI something like that provided by this, but it doesn't work: it allows you to select items that already exist in the select, but doesn't work with a dynamically created select.
The final step is a traditional postback (using a submit button, this is in asp.net webforms) where I'll need to have access to the final list of IDs.
Are there other options for this?
Based on your comments below, there are a lot of ways to skin this cat. The following approach is similar to the SelectList idea only it doesn't use a dropdown list. The nice thing about the Listbox versus the DropdownList is that the user will be able to view many items at once. Of course, the choice of using a Listbox or a DropdownList doesn't really matter as they both essentially provide the same functionality. The key about this answer is that values are stored on the client until you're ready to submit.
Create an autocomplete textbox that dynamically fills a Listbox as you type.
Clicking on a Listbox item results in two things happeing:
The ID of the selected item is stored in a client-side array
A list of items are rendered/re-rendered on the page exactly like the SelectList. Clicking the red 'X' will remove the ID from the array and re-render the list. You'll have to do a bit of jQuery coding on your side but it isn't much.
The above steps are repeated until the user has selected all of their items.
Upon clicking "Save", only the selected items are submitted to the server for processsing.
Related
There are five tables. My question is how to perform search on one table and move to another table if the result is not there, and display relevant information where ever it's found, in a gridview, on my .aspx page. The problem is I have to implement this search using a single button click event (Cannot use radiobuttons or checkboxes to filter).
I’m working on an asp.net page that simplified looks like this: A group of radiobuttons at the top, some asp dropdownlists in the middle and an asp button labled ”save” at the bottom. I want the page to work like this: When one radiobutton in the group has focus you should be able select one of the others by pressing the up and down arrow keys. At the same time different dropdownlists should be disabled or enabled depending on which radiobutton is selected. Then you select values from the enabled dropdownlists. Finally, by clicking ”save” values should be fetched both from the radiobuttons and the dropdownlists and passed via a procedure to a database. I’ve tried out html input radiobuttons, asp radiobutton and asp radiobuttonlist but have not managed to get the page to work the way I want it to. I’ll be very glad for help to a solution.
Write a project to display the flags of four different countries, depending on the setting of the radio buttons. In addition, display the name of the country in the large label under the flag picture box. The user also can choose to display or hide the form's title, the country name, and the name of the programmer. Use check boxes for the display/hide choices.
I want to generate a drop down list from another drop down list. That is I have a dropdown of countries. When selecting a country,another dropdown must come with values as states of that specific country. How to do that in asp.net using c#?
for each country you have, add a new list item to the drop down list, with text the country and the value some id of the country. On the second drop down list, set the auto post back property to true and add an event to the on selected item change. In the event code, get the selected item and by the second ddl.
Try it!
Tip: add a hidden field on the page, and on the selected item changed event from the first ddl, set the value of the hidden field, the selected value. On the page_load event, verify if the value is string.empty and if is an id in the value. If it is, bind the second ddl.
The technology you're looking for is called a Cascading Dropdown.
If you are using WebForms then Ajax Control Toolkit then this has one built in:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx
Otherwise you might need to do a further search if you are using MVC.
PS I'm not particularly proud of posting a link to the Ajax Control Toolkit as its not the best library out there but it is an easy drop in for what you want. If you're serious about doing a good job then I'd search for better options for cascading dropdowns.
In my application, I have a list box(list of stores), Add and Remove buttons and another list box (selected stores).
I have Following requirements:
1. On click of Add button, copy selected items from the master stores list to the selected store list and clear the selection from master store list.
2. On Click of Remove button, remove the selected stores from the selected stores list.
I have added my master store list box and selected store list boxes to 2 different update panels and added triggers for each of the update panel. Things are working fine but one thing I have observed that it is taking unusually long to move selected stores from master list to selected list. I have around 5000 entries in the master list of stores.
If I remove the update panel for master store list, things are normal but I am not able to clear the selection. Am I doing something wrong? Is there a way to clear selection of listbox outside the update panel.
It sounds like your using UpdatePanels to move ListItems between 2 ListBox controls. This creates a overhead as each time you trigger the 'add' event it has to postback and render the UpdatePanel again (including the viewstate).
Have you looked into using jQuery to move your list items between your ListBox controls thus all the moving between boxes is handled by the browser. This will speed up the experience for the user?
You should also be able to use jQuery to clear the selection. If you can provide me a little snippet of your markup I can help you get it written up (or shoot me a message).
Brian =)
How do I handle selection of multiple items with autocomplete? The objects I return from my JSON web service contain an ID and a Label - the ID is the ID of the entity in the database, and the Label is some text to display for the user.
At the moment, when I select an item in the autocomplete dropdown, the value of the item's ID is stored in a hidden field, and the label is displayed. When I remove the label, I clear the ID of the hidden field - this is done by adding an anchor element to the DOM that handles this.
Now, I want to have multiple selections. I want to be able to enter some text, get an autocomplete dropdown, select an item and some other options, then be able to click an 'Add New' button or the likes to be able to select another instance.
For example, I'd type in a person's name and get an autocomplete selection. I'd select a person, and then enter their age, and click 'Add'. The person's id, name, and age will be stored somewhere so that I can retrieve it on the server side when I post back.
I'm not quite sure how to do it? I'm thinking of a hidden field - I assume that many hidden fields of the same name/id turn up on the server side as an array, which I can then use. But I haven't tried this yet in ASP.NET.
How have you gone about this problem?
Well, no suggestions. I did it eventually by, in the autocomplete selection, creating a nicely styled span. It's text contains the label, it contains an anchor element that I bind a click event to that removes the element if necessary, and I use the jQuery data API to store the ID value on the span. This span gets added to a container div, before the textbox that I'm using to autocomplete. I also bind a keyup event to the textbox to check for backspace - when it's pressed and the textfield is empty, then I remove the last autocomplete item. It's a little more complex though, since by the time the keyup event is pressed, the character that was being removed from the textbox has already been removed, so I store the actual value in the keydown event too using the jQuery API and check this in the keyup event.
There is a hidden field on the form, that I keep populated with a comma-separated list of ID values extracted from the span's data. This can be kept in sync when adding/removing items, or only when I post back - it's simplest to just clear it and repopulate it, and is quite efficient as far as I can tell.
When loading the page, the spans and hidden field must be generated.
Hope this helps anyone else looking for a solution.