Click here to Skip to main content
Click here to Skip to main content

Rearranging ASP.NET ListView Items using JavaScript

, 17 Dec 2012 CPOL
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.

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.

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.

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)

Share

About the Author

AshishChaudha
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/
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionCan help me please PinmemberMember 959626621-Nov-12 9:39 
GeneralMy vote of 5 PinmemberRaghvendra Singh Verma2-Oct-12 23:03 
AnswerRe: My vote of 5 PinmemberAshishChaudha23-Oct-12 0:15 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.141015.1 | Last Updated 17 Dec 2012
Article Copyright 2012 by AshishChaudha
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid