Click here to Skip to main content
13,295,953 members (52,981 online)
Click here to Skip to main content
Add your own
alternative version


9 bookmarked
Posted 14 Aug 2012

Rearranging ASP.NET ListView Items using JavaScript

, 17 Dec 2012
Rate this:
Please Sign up or sign in to vote.
This article discusses a simple way of rearranging the ASP.NET ListView Items using JavaScript.


This tip discusses a simple way of rearranging the ASP.NET ListView Items using JavaScript.


There are some scenarios when we want to rearrange the ListView items on an ASP.NET web page. This small tip explains a simple method to do the same.

Using the Code 

The basic idea behind the sample code is to find out the user selected index for the listview. We will then see where the user wants to move this item to. Then we will simply take the selected index as old index and the desired index as new index and swap the value and text for these two items on client side using JavaScript.

function MoveItemUpDown(goUp) 
	var list = document.getElementById('lstACitem');   
	//Get the current selected items index
	var selectedIndex = list.selectedIndex;
	//tell the user to select one if he hasn't
	if (selectedIndex == -1)
		alert("Select an item for re-ordering.");
		//check if we need to move up or down
		var newIndex = selectedIndex+ (goUp ? -1 : 1);
		if (newIndex < 0) 
			//If we have reached top cycle it to end
			newIndex = list.length-1;
		else if(newIndex >= list.length)
			//If we have reached end cycle it to top
			newIndex = 0;
		//Lets take the old items value and text
		var oldVal = list[selectedIndex].value;
		var oldText = list[selectedIndex].text;
		//Swap the value and text of old and new items.  
		list[selectedIndex].value = list[newIndex].value;
		list[selectedIndex].text = list[newIndex].text;
		list[newIndex].value = oldVal;
		list[newIndex].text = oldText;
		list.selectedIndex = newIndex;
		//Done, the element is moved now

When we run the code, we can see the list items getting rearranged and all this is being done on the client side.

Point of Interest

This small tip has been written so that developers asking the similar question on "Quick Answers" can find a solution for such problems easily.


  • 14th August 2012: First post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
India India
I am a Software Engineer from Bhopal. I started my Career from Programming in ASP and now working as a Web Developer in ASP.Net (C#). I Love coding and always ready to gain new thing and always been towards Microsoft Technologies. Apart from coding my other hobbies are traveling, Internet Surfing, spending time with family and hang out with friends.

You may also be interested in...


Comments and Discussions

QuestionCan help me please Pin
Member 959626621-Nov-12 10:39
memberMember 959626621-Nov-12 10:39 
GeneralMy vote of 5 Pin
Raghvendra Singh Verma3-Oct-12 0:03
memberRaghvendra Singh Verma3-Oct-12 0:03 
AnswerRe: My vote of 5 Pin
AshishChaudha23-Oct-12 1:15
memberAshishChaudha23-Oct-12 1:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171207.1 | Last Updated 17 Dec 2012
Article Copyright 2012 by AshishChaudha
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid