Manually Ordering Data in Silverlight 3

11-03-2009 2:40 PM |

 Can anyone recommend a control or strategy for manually ordering data?  Sorting is obviously built in.  I want to pull down a set of data and manually be able to drag and drop / slide / click to set the order of the rows of data.  If row 3 were to be moved to row 1, rows 1 and 2 would update to reflect their new positions.  Of course typing is available, I just don't want to have to mentally keep track of row orders.

Failed Attempts

• Drag and Drop with a Datagrid.
  
• Drag and Drop with a ListBox in a Child Window.
• Drag and Drop worked in a ListBox in a page or usercontrol, but it required an Observable Collection to work.  This removed the two-way binding I had going on between the ListBox and DataForm.

Re: Manually Ordering Data in Silverlight 3

11-04-2009 6:27 PM |

I would guess that if you bound any of the controls that support lists to a List with two way binding, then when you re-order them in the control the list should get re-ordered.

Is that not what is happening?

Re: Manually Ordering Data in Silverlight 3

11-06-2009 12:04 AM |

Hi,

I saw new released silverlight toolkit support drag and drop, it provide a sample draging to reorder listbox, you may want to have a see

http://silverlight.net/content/samples/sl3/toolkitcontrolsamples/run/default.html?path=Toolkit|Drag and Drop

Thanks,

Re: Manually Ordering Data in Silverlight 3

11-06-2009 12:57 AM |

I originally started with the .NET RIA Services Intro Video (http://silverlight.net/learn/videos/silverlight-videos/).  In it that Tim Heuer guy binds a dataForm and a datagrid to a collection via RIA Services DomainDataSource.DomainContext with two-way binding.  Then that same Tim fella introduces drag and drop via the ListBoxDragDropTarget (http://timheuer.com/blog/archive/2009/10/19/silverlight-toolkit-adds-drag-drop-support.aspx).

 So things were looking really promising for doing what I wanted (ordering rows of data via drag and drop).

But then this crazy Jafar guy (http://themechanicalbride.blogspot.com/2009/08/new-with-silverlight-toolkit-drag-and.html) says that the DataGridDragDropTarget doesn't support reordering because the ItemsControl is not virtualized (don't quite understand that yet).

Obviously the list box was working according to Tims article, but reordering within a single ListBox was not.  The work around was to pull the collection down through the RIA service and then loop the collection into a secondary ObservableCollection and then bind the listbox to it.  Drag and Drop reordering within the same listbox was now working, except the dataform no longer linked/updates when I click on items in the listbox. Not sure how to hook it back up.

So the next idea was to leave well enough alone.  Use the Video example for the basic CRUD work and then launch a child page to do the sorting in a listbox.  Another dead end.  Drag and Drop isn't supported in the modal child page.

I am sure I have made some inaccurate assumptions, so if you can correct any of them, by all means have at it.

thanks

Re: Manually Ordering Data in Silverlight 3

11-16-2009 12:02 PM |

Hey everyone, this is how I went about doing it. I used the new functionality in the control toolkit.  I was trying to mimic the reorder list from the AJAX toolkit. So I am using a ListBox in my example.

http://www.xdevsoftware.com/blog/post/Reorderlist-with-Silverlight-3-Drag-and-Drop-Listbox-.aspx

Right now all it does it reorder only. However, it doesn't save the new order until you click the submit button.  I need to see what events occur when actually doing the drag and drop.  Then maybe I could hook into one of those to update the order in the database as you are doing the reorder.  

I would like to find an easier solution compared to mine, so if you have found any in the meantime let me know.

Re: Manually Ordering Data in Silverlight 3

11-23-2009 4:54 PM |

Hi,

I read your posts and found them very interesting, so please allow me to join in...
Isn't there an event we can use in combination with a
ListBoxDargDropTarget (DataGridDragDropTarget)  like

in XAML:

<toolkit:ListBoxDragDropTarget Drop="ListBoxDragDropTarget_Drop" <-----
                               mswindows:DragDrop.AllowDrop="True">
  <ListBox x:Name="lstEmployee" MinWidth="150" MinHeight="250">
      <ListBox.ItemsPanel>
         <StackPanel Orientation="Vertical"/>
      </ListBox.ItemsPanel>
      <ListBox.ItemTemplate>
         <StackPanel Orientation="Horizontal">
             <Image Source="{Binding Photo}" HorizontalAlignment="Left" Width="65" Height="65"/>
             <TextBlock Text="{Binding ID}"/>
            <TextBlock Text="{Binding Name}"/>
          </StackPanel>
      </ListBox.ItemTemplate>
  </ListBox>
</toolkit:ListBoxDragDropTarget>

to which we can assign an update function in code behind:

private void ListBoxDragDropTarget_Drop(object sender, Microsoft.Windows.DragEventArgs e)
{
  //some code to use to update borrowed from wtroom
  for (int i = 0; i < lstEmployees.Items.Count; i++)
  {
       lstEmployees.ItemOrder = i + 1;
  }

     svc.UpdateItemsAsync(lstEmployees); <-------- Call your Web Service 

}

Drag and Drop options are pretty neat as an animation.
I first saw the MSCUI demo and wanted to know how the new ListBoxDragDropTarget would
respond with Blacklight DragDockPanel. (Dragging an item from a listbox in one panel to another listbox
located in another panel)
It worked... but still... I soon realized there was something very important missing...
I wouldn't see how a user could take full advantage of this tool if it cannot record any drag and drop event.
Clicking on a submit button raises an event to which we can assign an update function,
therefore I wouldn't see why it couldn't be done in combination with a Drop event.
That's something I'm actually testing.

Also I haven't really tried it but someone brought a question about combining a ListBoxDragDropTarget
and a custom DataGrid in a DataGridDragDropTarget control.
If a listbox contains only 2 elements (an ID and a Name) and you want to drag the information
to a new row in DataGrid containing several columns, wouldn't that create a conflict?