Showing posts with label Listbox. Show all posts
Showing posts with label Listbox. Show all posts

Monday, July 8, 2013

How to switch or add or move listbox item to another listbox items using javascript in asp.net C#

I believe, most of the developers will encounter the situation that in two list boxes, we like move listbox item to another listbox.
There is no issue if we are using C#. But, as we've known, there could be better if we can use javascript and it can reduce roundtrips (server-client) for every single time in clicking move button.
It is lightweight and user friendly. I have added one more good function that user can order the list as their own.
Below is the complete javascript.

<script type="text/javascript" language="javascript">
        function listbox_move(listID, direction) {
 

            var listbox = document.getElementById('<%= d.ClientID %>');
            var selIndex = listbox.selectedIndex;

            if (-1 == selIndex) {
                alert("Please select an option to move.");
                return;
            }

            var increment = -1;
            if (direction == 'up')
                increment = -1;
            else
                increment = 1;

            if ((selIndex + increment) < 0 ||
                (selIndex + increment) > (listbox.options.length - 1)) {
                return;
            }

            var selValue = listbox.options[selIndex].value;
            var selText = listbox.options[selIndex].text;
            listbox.options[selIndex].value = listbox.options[selIndex + increment].value
            listbox.options[selIndex].text = listbox.options[selIndex + increment].text

            listbox.options[selIndex + increment].value = selValue;
            listbox.options[selIndex + increment].text = selText;

            listbox.selectedIndex = selIndex + increment;
        }

        function listbox_moveacross(SwapDirection) {
            if (SwapDirection == 'add') {
                var src = document.getElementById('<%= s.ClientID %>');
                var dest = document.getElementById('<%= d.ClientID %>');
            }
            else {
                var src = document.getElementById('<%= d.ClientID %>');
                var dest = document.getElementById('<%= s.ClientID %>');
            }
            for (var count = 0; count < src.options.length; count++) {

                if (src.options[count].selected == true) {
                    var option = src.options[count];

                    var newOption = document.createElement("option");
                    newOption.value = option.value;
                    newOption.text = option.text;
                    newOption.selected = true;
                    try {
                        dest.add(newOption, null); //Standard
                        src.remove(count, null);
                    } catch (error) {
                        dest.add(newOption); // IE only
                        src.remove(count);
                    }
                    count--;

                }

            }

        }
        function listbox_selectall(listID, isSelect) {

            var listbox = document.getElementById(listID);
            for (var count = 0; count < listbox.options.length; count++) {

                listbox.options[count].selected = isSelect;

            }
        }
        function GetSubscribed() {
       
            var listbox = document.getElementById('<%= lbxCustomer.ClientID %>');
            var selIndex = listbox.selectedIndex;

            if (-1 == selIndex) {
                alert("Please select one of the Customers.");
                return false;
            }

            var listbox = document.getElementById('<%= d.ClientID %>');
            var allvalue = '';
            for (var count = 0; count < listbox.options.length; count++) {

                allvalue += ',' + listbox.options[count].value;

            }

            var hiddenControl = '<%= hfSub.ClientID %>';
            document.getElementById(hiddenControl).value = allvalue;
        }
</script>


 In aspx file




You will see that there is a subscribe button because after user move list items, server side code cannot detect the items moved. So I put hidden fields and populate it in OnClientClick.
Then you need to values from Hidden field.
That's it.
Enjoy programming.