Click here to Skip to main content
15,861,168 members
Articles / Web Development / ASP.NET
Tip/Trick

Rearranging ASP.NET ListView Items using JavaScript

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
17 Dec 2012CPOL 19.5K   210   9   3
This article discusses a simple way of rearranging the ASP.NET ListView Items using JavaScript.

Introduction

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

Background

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.

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.");
	}    
	else 
	{
		//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.

Image 1

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.

History

  • 14th August 2012: First post

License

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


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

http://www.webtekspace.blogspot.in/

Comments and Discussions

 
QuestionCan help me please Pin
Member 959626621-Nov-12 9:39
Member 959626621-Nov-12 9:39 
GeneralMy vote of 5 Pin
Raghvendra Singh Verma2-Oct-12 23:03
Raghvendra Singh Verma2-Oct-12 23:03 
AnswerRe: My vote of 5 Pin
AshishChaudha23-Oct-12 0:15
AshishChaudha23-Oct-12 0: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.