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.
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