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.

No comments:

Post a Comment