Reality is easy. It's deception that's the hard work.
SELECT but it enables the user to select multiple items at a time. The list items are shown along with a checkbox and it will be checked if item is selected. It also has all option, through which the user can select OR unselect all list items in a single click.
I recently added filtering option in the list, the user can specify a keyword and press enter to filter the list. The component also creates a hidden field to store selected values and on form postback comma separated values/ids will be sent to server. The selection is sent with the same name as the ID of the container specified at control instantiation point.
The component display and functionality is tested on Chrome, Safari, Opera, Firefox and IE-9+ browsers and it works fine. The style and display of each part of component can be easily controlled by the associated stylesheet. See
MSDList.css in source files.
The user can add/remove items after the list is instantiated, no matter if the control is rendered or not.
Set the initial container element before render. This can be either a simple DIV or SELECT tag. In case it is a SELECT tag then the existing items will be added to component list
The label to display when all items are selected in the list. By default it is "[All Selected]"
The label to display when no item is selected in the list. By default it is "[Select]".
The message to display when filter box is empty. By default it is "[Type here to filter list]"
Sets the width and height of drop down bar which includes the label and drop down button. Layout will be automatically adjusted if the control is already rendered. Please note that the width of the LIST will be same as the BAR where as to set the height of LIST, see the CSS class MSDList_List
sets the width of BAR
sets the height of BAR
Return true if the list is already rendered otherwise false
Display the list of items
Hide the list of items
Add an item to the list. The id for each item must be unique within a list. The label will be displayed along with a checkbox that shows its selection. On Form Postback an array of selected ids will be sent to server
Delete an item having specific id from the list
Clear the list and remove all items
Mark checkbox as checked for a specific item
Mark checkbox as unchecked for a specific item
Mark checkbox as checked for all items
Show/hide filter box. Pass true to show and false to hide. If the filter contains some value then it will be cleard before hiding.
Sets the value in filter box. If the value is non-empty string then it will automatically call filterList() function.
Returns an array of selected items from the list i.e; those items from list whose checkbox is checked. Each array item will be an object containing the following attributes: id and label
The render method actually transforms the a DIV or SELECT into multi-select drop down list.
Filters the list based on search keyword provided in filter box. You may not need to call this function as it is called automatically when filter box is changed or enter key is pressed.
This method calculates the size and position of each dom node with-in the component with repesct to base width and height (setDimension). It also calls the _layoutList automatically if the list is visible.
Update the size and position of List container and its items with respect to drop down bar.
Manages display labels and selections when item are add/removed, checked/unchecked