John Mendez

Since the October 2009 version of the toolkit was released, I've been meaning to create a ReorderList in Silverlight.  I wanted to mimic the functionality of the AJAX Toolkit ReorderList for reordering only.  I'll probably expand on this in the future to allow the insert/update/delete aspect as well.

So I did my best as creating that with the new drag and drop functionality in the Silverlight toolkit and a ListBox.

My Environment: 

• Visual Studio 2008 Professional
• ASP.NET 3.5
• Silverlight 3
• October 2009 Silverlight Toolkit
• Web Service (ASMX)
• LINQ to SQL
• SQL 2005

Here is a screenshot from Visual Studio for the solution

  

First I created a sample table in my database to hold the items called Items

  

Note: I have an ItemOrder column of type INT.  This will allow us to keep track of the order of the items.

Next we need to put methods in our Web Service to retrieve the items and to update the items.  Below is the code from the Web Service:

Please note that the TestDBContextDataContext testDB = new TestDBContextDataContext(); is from the LINQ to SQL model I had already setup.  The LINQ to SQL model consisted of me dragging the Items table I made in SQL to the LINQ to SQL Designer

In the UpdateItems method we are

1. Selecting the items from database again
2. Looping through those items and finding the same item in the updatedItems list based off the ItemUniqueID field
3. We assign the new ItemOrder value from the updatedItems list to the original items list in the database.

Now that we have the database and web service setup, we can now concentrate on the Silverlight part of this.

First we need to make the UserControl.  This is not too much work, since this is just an example. Below is the XAML code for the UserControl

Next is the code behind for the XAML

 The logic for the code above is the following:

• Include the using statement "using TestSL3.WebSvc;" to reference our web service
• Define an ObservableCollection to store the items in.
• Call our web service and get the items from the database
• Submit the items (with their new order number) to our Web Service once the reordering is done on the UI side

Screenshots

First Load Before the Reorder

  


Second: During the Reorder Process (repeat as needed)

  


Third (After Reorder Process)

  


Fourth (Database after hitting Submit in the UI)

  

And that is that. You can now have a ReorderList in Silverlight 3 with the help of the Toolkit!  Again, I hope to expand on this to add the ability to insert/update/delete.  If so I'll put it up here as a zip file for everyone to download.  Happy coding, leave any questions or suggestions as usual.

Silverlight silverlight