Asim Ishaq

Web-Application Developer

MSDList


MSDList is a JavaScript component similar to regular html 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 developed this component for one of my projects, where in some cases multiple items needs to be selected in a combobox and now sharing it online so other developers can benefit. The component is written in pure JavaScript and no 3rd-party library (like jquery, yui, dojo etc) is used. The class structure is based on Hybrid constructor/prototype paradigm and the developers can extend the component using prototypal inheritance if required.

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.

Usage

First of all include the following CSS and Javascript files into your page:

<link rel="stylesheet" href="MSDList.css" />
<script type="text/javascript" src="MSDList.js"></script>
  • Method-1: Using a DIV as a container/reference element
    HTML
    <!-- Write the following HTML in document body -->
    <div id="mylist" />
    JavaScript
    /*Write the following code in either document onload or any other event as desired:*/
    <script type="text/javascript">
    window.onload = function () {
    var mylist = new MSDList("mylist");
    mylist.render();
    };
    </script>
    	  
  • Example Output

  • Method-2: Using a SELECT list already populated with values
    HTML
    <!-- Write the following HTML in document body -->
    <select id="countrylist">
    <option value="c1">America</option>
    <option value="c2" selected>Australia</option>
    <option value="c3">Canada</option>
    <option value="c4">India</option>
    <option value="c5">Pakistan</option>
    </select>
    JavaScript
    /*Write the following code in either document onload or any other event as desired:*/
    <script type="text/javascript">
    window.onload = function () {
    var countrylist = new MSDList("countrylist");
    countrylist.render();
    };
    </script>
    	  
  • Example Output

  • Note that the user must call .render() function of list to actually render the componenet in DOM.

Add/Remove List Items

The user can add/remove items after the list is instantiated, no matter if the control is rendered or not.

Example
HTML
<!-- Write the following HTML in document body. Here Note that the container element can be either a DIV or SELECT tag. If its a SELECT tag then the existsing items in SELECT will be added to componenet list. -->
<div id="citylist" />
Javascript Code
/*Write the following code in either document onload or any other event as desired:*/
<script type="text/javascript">
window.onload = function () {
var citylist = new MSDList("citylist");
citylist.addItem("c1","London");
citylist.addItem("c2","Sydney");
citylist.addItem("c3","Cyprus");
citylist.addItem("c4","Lahore");
citylist.render();
citylist.addItem("c5","Kabul");
};
</script>

Example Output

API Methods

  • setContainer(String container)

    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

  • setSelectAllLabel(String label)

    The label to display when all items are selected in the list. By default it is "[All Selected]"

  • setEmptyMessage(String label)

    The label to display when no item is selected in the list. By default it is "[Select]".

  • setEmptyFilterMessage(String message)

    The message to display when filter box is empty. By default it is "[Type here to filter list]"

  • setDimension(int width, int height)

    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

  • setWidth(int width)

    sets the width of BAR

  • setHeight(int height)

    sets the height of BAR

  • isRendered()

    Return true if the list is already rendered otherwise false

  • showList()

    Display the list of items

  • hideList()

    Hide the list of items

  • addItem(String id, String label)

    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

  • removeItem(String id)

    Delete an item having specific id from the list

  • removeAllItems()

    Clear the list and remove all items

  • selectItem(String id)

    Mark checkbox as checked for a specific item

  • unselectItem(String id)

    Mark checkbox as unchecked for a specific item

  • selectAllItems()

    Mark checkbox as checked for all items

  • setFilterVisible(Boolean visible)

    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.

  • setFilterValue(String value)

    Sets the value in filter box. If the value is non-empty string then it will automatically call filterList() function.

  • getSelectedItems()

    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

  • render()

    The render method actually transforms the a DIV or SELECT into multi-select drop down list.

  • filterList()

    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.

  • Private _layout()

    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.

  • Private _layoutList()

    Update the size and position of List container and its items with respect to drop down bar.

  • Private _updateSelection()

    Manages display labels and selections when item are add/removed, checked/unchecked


Share your Opinion


Comments

Asim Ishaq 2014-07-29 11:55:13

If you are talking about the height of the list being displayed then you may use the following CSS to alter the height of list as desired, default value is 250px:


.MSDList_List {
max-height:150px
}

Note that you must write the above CSS after you have linked MSDList.css in your wen page

If you are talking about the height of the BAR then you can pass height parameter to constructor, like in your example we can do this in getList function:


var disclist = new MSDList(id,{height:"20px"});

Note that the default height is 24px

See the following JSFIDDLE:

Girish Ausekar 2014-07-29 11:27:13

Hi Asim,

Thanks for reply!

I worked around your suggestions and it's works for me, Thanks for that!

Just I have one, not  an issue but on height of div of Selector, as i'm working with gridview of asp.net, so table row height  should be same for all...this div taking little much more height as I set to gridview row height...which I attached screen shot for that..u can check it...I went thru your JS file ...but u already mentioned that bar size and chkbox list table size same, so difficult to manage that height...so cn u guide me on that...hw can I keep div height smaller

Thanks,

Girish

Asim Ishaq 2014-07-26 03:38:28

Dear Girish,

I have gone through your code and have some suggestions:

  • There is no need to use a Timer. First populate the HTML of MSDList and then call the constructor.
  • In getList function after creating the MSDList do call unselectAllItems() because normally the first item is automatically selected.
  • I recommend using a DIV as a container instead of a TD because while developing this component I tested it for DIV as a parent container. So hopefully it will perform best cross browser.
  • There is no need to assign an id to option like you did in "c1". An option is dynamically selected by passing its value to selectItem function and not the id. So to select the "c1" option use the following code: lst.selectItem("Civil")
  • I created a working example based on your code see the following fiddle:Â http://jsfiddle.net/YRafQ/9/

Exmaple Based on your code

Girish Ausekar 2014-07-26 03:37:55
Hi,

Thanks for posting this code.

it 's working nicely on my app, just few issues where I stuck, cn u help me on same.I have added select option html element, i'm trying to select item from check box dynamically, so I using "selectItem" method but it's not selecting item

see code below
td.append($('<select id="allDisc' + drplistCntr + '" multiple="multiple"><option value="Water Networks">Water Networks</option><option value="Waste Water Networks">Waste Water Networks</option><option value="Process">Process</option><option value="Mechanical">Mechanical</option><option value="Electrical">Electrical</option><option value="ICA">ICA</option><option id="c1" value="Civil">Civil</option><option value="Structural">Structural</option><option value="Highway Transport">Highway Transport</option><option value="GIS">GIS</option><option value="CAD">CAD</option><option value="Project Controls">Project Controls</option><option value="Document Controls">Document Controls</option></select>'));

var id = td[0].lastElementChild.id;
setTimeout(getList(), 2000);

function getList() {
disclist = new MSDList("allDisc1");
disclist.selectItem("c1");
disclist.render();
drplistCntr++;
}

Can you please help me on this with some example.

Thank You!

Girish

Sathish Anichetty 2014-06-11 03:49:46
Hi Asim,

Is there a way to disable the MSDList <div> container element like we do for any other HTML element using javascript command i.e. document.getElementById('MSDList_Element').disabled = true?

Regards,
Sathish

Asim Ishaq 2014-04-11 17:48:49
Dear Sridhar,

I have verified the case by writing some test code and it works fine. The List dropdown correctly overlaps the other form items.

See the following example:

It is possible that in your code there are issues with CSS and HTML of your page. Please share the code snippet so that I can debug further!

Sridhar Boopathy 2014-04-11 16:48:49

Dear Asim,

I'm new to the web page design, i used one MSDList div tag. Below this div tag a html submit button tag is there in my app. When i run my app in chrome or IE the problem is the html submit button is coming over the MSDList drop down list when i click the div tag. i mean the drop down list is not hiding the submit button.

Snapshots:



Could you please help on this?

Thanks,
Sridhar

Asim Ishaq 2014-04-07 14:25:12
Dear Nina,

It will be better if you can share the complete javascript code of creating list and sending data through ajax. However, It appears that you are unable to get selected items from the list.

Is date1 and date2 are MSDList?
--if Yes then you cannot access them using $("#date1")

Let see it step by step:

Creating the List

It is not necessary to create list in window load method, it can also be created in jquery $(document).ready function. See the below code:

<script type="text/javascript">

var list1;
$('document').ready(function () {
list1 = new MSDList("list1");
});

function ajaxRequest() {
var selectedItems = list1.getSelectedItems();
}
</script>

Did you noticed in above code the list1 variable is GLOBAL in scope and see how selected items are taken from the list in ajaxRequest method.

If you still have issues then please attach full code snippet with comment.

Nina 2014-04-07 11:35:12
Hi, I am using ajax to send form data to a php page.

$( document ).ready(function() {
$('#button1').click(function() {

date1=$('#date1').val();
date2=$('#date2').val();

$.ajax({
data: 'date1='+date1+'&date2='+date2, // get the form data
type: 'POST'

...and so on to send ajax request to php page and get a respones.

My problem is that i am unable send data from MSDlist. even on using getSelectedItems()

I'm loading the lists in a windows onload function. I want the data in ajax section. i tried different ways none are working. Please let me know if there is a way to do this.

Thanks
Asim Ishaq 2014-03-18 17:20:01

Dear Siraj Mahmood,

The list1 variable must be global in scope and it should not be re-declared as currently done in formSubmit() function. Following is the working example of what you want to achieve:


<script type="text/javascript">
var list1;

window.onload = function () {
list1 = new MSDList("list1");
list1.render();
list1.addItem("c1","America");
list1.addItem("c2","Africa");
}
function formSubmit() {
var selItems = [];
selItems = list1.getSelectedItems();
alert("The length of items is " + selItems.length);
return false;
}
</script>

<body>
<form id="sample" method="POST" action="/sample.do">
<div id="list1"></div>
<input type="button" value="Submit" onclick="formSubmit()">
</form>
</body>
Syed Siraj Mehmood 2014-03-18 14:20:01

Hi Asim,

I am trying to implement a validation on the selected items of the MSDList on form submit to check if any value is selected or not for a particular MSDList before submitting the data to server as shown below.

However, the .getSelectedItems().length always returns 0 even if there are values selected in that MSDList.

Could you please help me to solve this?


<html>
<script type="text/javascript">
window.onload = function () {
var list1 = new MSDList("list1");
list1.render();

list1.addItem("c1","America");
list1.addItem("c2","Africa");
}

function formSubmit() {
var list1 = new MSDList("list1");
var selItems = [];
selItems = list1.getSelectedItems();

alert("The length of items is " + selItems.length);

return false;
}
</script>

<body>
<form id="sample" method="POST" action="/sample.do">
<div id="list1"></div>
<input type="button" value="Submit" onclick="formSubmit()">
</form>
</body>
</html>
Asim Ishaq 2014-03-07 00:47:28

To place the lists at desired places, first create a container element and then apply style on that container. See the following code:

HTML

<>
<
>

CSS

<> .list1_container { float:left; padding:10px } .list2_container { float:right; padding:10px } <>

JAVASCRIPT

<> var list1 = new MSDList("list1"); list1.addItem("i1","test-1"); list1.addItem("i2","test-2"); list1.addItem("i3","test-3"); list1.render(); var list2 = new MSDList("list2"); list2.addItem("i1","test-1"); list2.addItem("i2","test-2"); list2.addItem("i3","test-3"); list2.render(); <>

Working Example:

The css file MSDList.css is for component styling only. You may override it or change its content if you want to change the look of control (colors, icons, sizes etc).

Sathish Anichetty 2014-03-07 00:24:43

Hi Asim,

It's my bad. I just realized that there are two 'window.onload' calls. I updated as shown below and it's working fine now.

<> <>

Also, I need another clarification regarding the position of the drop-down menu's in the page. Is it possible to edit the MSDList.css file to place the drop-down's wherever I want? Even if I can update the .css file, how do I differentiate between each <>

<> element as all the references in the .css file starts with .MSDList?

Please check on the below link under CSS section on what I am looking for,

<>http://jsfiddle.net/r2T3k/11/<>
Asim Ishaq 2014-03-06 03:41:36

Satish,

​Use window.onload function once. Try the following javascript code:


<script type="text/javascript">
window.onload = function () {
var gbp = new MSDList("gbp");
gbp.addItem("val1","CITS");
gbp.addItem("val2","COVC");
gbp.render();

var test = new MSDList("test");
test.addItem("val1","one");
test.addItem("val2","two");
test.render();
};​
</script>
Sathish Anichetty 2014-03-06 03:38:48

Hi Asim,

Yes, i checked the id names are unique.

The following code was put inside the html <><> section,

<> <>

and in the html <><> the following lines were added,

<>
<
>

Let me know if you need more details.

Asim Ishaq 2014-03-06 01:20:00

Dear Satish,

I checked by creating two instances of list on same page and it appears to be working fine. See the following example:

Check in your code that the IDs of each div is unique and you have called the render function. If the problem persists then you may share your code so i can look into it

Sathish Anichetty 2014-03-06 01:12:46

Hi,

Thanks for sharing. I updated this to one of my jsp pages and able to create a dropdown list and add items to the same. However, when I create two <div> elements for two dropdowns, the page renders only one dropdown.

Could you please let me know how to use this for multiple dropdowns?


Copyright (c) 2014. Asim Ishaq. Site built with Twitter Bootstrap