Highlighting a specific row during drag-and-drop

[GEB]

With the latest future build, I am able to now detect that an object is being dropped into a specific row.  I would like to highlight the row before the object is dropped by changing the boder of the row.  I can successfuly detect the row, but when I try setting the BorderThickness and the BorderBrush, I don't see the effects.  If I change the Background property, I can see the results, but I do not want to highlight then entire background.

	private void OnGridDropInfo(object sender, DragDropEventArgs e)
	{
	if (e.Options.Status == DragStatus.DropPossible)
	{
	GridViewRowItem rowItem = e.Options.Destination as GridViewRowItem;
	if (rowItem != null)
	{
	rowItem.BorderBrush = new SolidColorBrush(Colors.Red);
	rowItem.BorderThickness = new Thickness(1);
	}
	}
	else
	{
	GridViewRowItem rowItem = e.Options.Destination as GridViewRowItem;
	if (rowItem != null)
	{
	rowItem.BorderThickness = new Thickness(0);
	rowItem.BorderBrush = null;
	}
	}
	}

[Stefan Dobrev]

Hi Gary,

This is a known issue in the themes for RadGridView. Currently the ControlTemplate for GridViewRow did not have Template bindings for BorderBrush and BorderThickness. This means that the change you are making did not get propagated to the Border element that is in the GridViewRow's template. We will fix this for our official release.

However there is a way you can do this in the current situation. You should just find the border in the template. Here is an example how to achieve this:

var border = rowItem.ChildrenOfType<Border>().FirstOrDefault();

if ( border != null )

{

    border.BorderBrush = new SolidColorBrush(Colors.Red);

    border.BorderThickness = new Thickness(1);

}

Please note that the extension method ChildrenOfType<>() is included in the latest preview build of RadGridView for Silverlight.

Hope this will help.

Best wishes,
Stefan Dobrev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[GEB]

This works perfectly.  Thank you.

[Gopala]

I also have same issue but after following above codes I have a problem. The border for only the first mouse over row is shown but not for other mouse over rows so I changed the code as below and I have some performance issue. My mouse move is not smooth. Any help is greatly appreciated since I have a deadline today.

void gvSelectedAlpha_OnDropInfo(object sender, DragDropEventArgs e)
    { 
      if (e.Options.Status == DragStatus.DropPossible)
      {       
        if (e.Options.Destination is GridViewCell)
        {
          DragDropHelper.ShowDropEffectForDropPossible(e.Options.Destination as GridViewCell);
        }
      }
      else if (e.Options.Status == DragStatus.DropComplete)
      {
        if (e.Options.Destination is GridViewCell)
        {
          DragDropHelper.ShowDropEffectForDropComplete(e.Options.Destination as GridViewCell);
        }
      }
      else if (e.Options.Status == DragStatus.DropImpossible)
      {
        DragDropHelper.ShowDropEffectForDropImpossible(e.Options.Destination);
      }
    }

public class DragDropHelper
  {
    public static void ShowDropEffect(GridViewRow row, bool show)
    {
      Border border = row.ChildrenOfType<Border>().Where(b => b.Name == "Background_Selected").FirstOrDefault();
 
      if (border != null)
        border.Visibility = show == true ? Visibility.Visible : Visibility.Collapsed;
    }
 
    // show effect only for mouse over row but not for all other rows
    public static void ShowDropEffectForDropPossible(GridViewCell cell)
    {
      GridViewRow row = cell.ParentOfType<GridViewRow>();
      ShowDropEffectForOnlyOneRow(row);
    }
 
    //after drop is complete remove drop effect for current row
    public static void ShowDropEffectForDropComplete(GridViewCell cell)
    {
      GridViewRow rowItem = cell.ParentOfType<GridViewRow>();
      if (rowItem != null)
      {
        ShowDropEffect(rowItem, false);
      }
    }
 
    // show effect only for mouse over row but not for all other rows
    //drop location can be a cell or row level
    public static void ShowDropEffectForDropImpossible(object cell)
    {
      GridViewRow rowItem = null;
      if (cell is GridViewCell)
      {
        rowItem = ((GridViewCell)cell).ParentOfType<GridViewRow>();
      }
      if (cell is GridViewRow)
      {
        rowItem = cell as GridViewRow;
      }
      if (rowItem !=null)
      ShowDropEffectForOnlyOneRow(rowItem);
    }
 
    public static void ShowDropEffectForOnlyOneRow(GridViewRow rowItem)
    {
      var rows = rowItem.GridViewDataControl.ChildrenOfType<GridViewRow>();
      foreach (GridViewRow item in rows)
      {
        ShowDropEffect(item, false);
      }
      if (rowItem != null)
      {
        ShowDropEffect(rowItem, true);
      }
    }
  }

[Dimitrina]

Hello,

We have checked the code you have shared. The performance issues should be caused by the many iterations on the Visual Tree you do:

rowItem = ((GridViewCell)cell).ParentOfType<GridViewRow>();
var rows = rowItem.GridViewDataControl.ChildrenOfType<GridViewRow>();

I would suggest you to avoid searching in the visual tree. For example you could get the parent row using cell.ParentRow.

Then instead of searching for the "Background_Selected" Border, you could set the row to be selected, like so "row.IsSelected=True".

You could as well save a weak reference for the row being hovered and then reset it. Now you iterate on all the rows and this is slow.

I hope this helps.

Regards,
Didie
the Telerik team

[Gopala]

Thanks Didie. I will try what you said and will get back to you.

[Gopala]

Hi Didie,

I was able to use ParentRow but cannot remove

var rows = rowItem.GridViewDataControl.ChildrenOfType<GridViewRow>();

I need to get collection of rows in grdview the first set all rows to no selected and then set one row which I want to selected. I also removed border selection code and changed as below. Performance improved little bit.

Can you please tell me how I can get rows collection in gridview and iterate throw them. If wanted I can even pass collection of rowitems to my method then iterate through them. I will be waiting for your reply

 public static void ShowDropEffect(GridViewRowItem row, bool show)
    {
      row.IsSelected = show == true ? true : false;
    }

[Dimitrina]

Hi,

 You can iterate on the Items collection (RadGridView.Items). You could as well clear the selection using the RadGridView.SelectedItems.Clear() method. 

All the best,
Didie
the Telerik team