DragDrop on cell level

[Goran]

We are evaluating your controls, and before I try to explain a specific scenario, I ask you to update your documentation, which you have said to do in one of the topics here on the forum, but you still didnt. Its not a pleasent feeling to invest some time in RadDragAndDropManager, and then find out that it is obsoleted by DragDropManager. RadDragAndDropManager would always be a first choice, since its name starts with Rad.

We want to implement a specific scenario, where we would like implement grouping scenario between two RadGridView's. Imagine that there is a gridA which contains only one column, and gridB which contains 5 columns. To my knowledge, depending on where you set AlloDrag property in RadGridView, it will determine the position of Drag information (drag tooltip).

- if you set AllowDrag on GridView level, this tooltip will always be shown somewhere in the header area of GridView. I am not sure how usefull is that featue.
- if you set AllowDrag property on RowStyle, then when you drag, visually tou always drag whole row, even if you are setting the content to one cell value only. This means that if I click somewhere in the middle of the row (column index = 2), then I am dragging a pretty big row (visually looking) to a small cell in GridA (think of it that I am grouping something). This doesn't provide a good user experience.
- so this leads that I would need to imelement drag on a cell level, but I am not sure how to do this? I Could not find property CellStyle or something similar.

Questions:

1. I am not copying row data from one GridView to another, I am dragging an item in order to regroup it (which would require one (group) property to be updated on GridB entity. What is the best way to do this?

2. How do I set visual drag image to be the same as cell image? This means that I would want always to show in drag image cell with column index=0 (or 1), no matter if I click to start dragging over cell with column index=0, or 1,2,3,4.....  This way I can be sure that if I switch the theme, I am always going to use the template from current theme. And I want my image to be right next to my mouse, not like if I am dragging whole row, then my mouse cursor is somewhere on the row middle.

3. What is the best way to highlight the cell/row in destination GridView? I see that DragEventArgs offer GetPosition() method, which could provide relative coordinates in destionation grid. There is also an example with RowLoaded event. What;s the best way to allow me to use cell selected color scheme from theme for the cell I am currenlty over, and row hover color scheme  from the theme also? (in this example Cell = Row, but I could have 2-3 columns in destination gridview.

I hope that I didn't complicate my explanation, if I did, I will be glad to explain better.

Thanks,
Goran

[Nick]

Hello Goran,

It would be great if you could provide some more details regarding the first inquery. Thanks in advance!

About the second question, you can create a custom provider that gets a screenshot of the cell that is being dragged, and use it to set the content of the DragCue. 

public class ScreenshotVisualProvider
    {
        public static FrameworkElement CreateDragVisual(FrameworkElement element)
        {
            return CreateRectangle(element);
        }

        private static Rectangle CreateRectangle(FrameworkElement container)
        {
            return new Rectangle
            {
                Width = container.RenderSize.Width,
                Height = container.RenderSize.Height,
                Fill = new ImageBrush { ImageSource = new WriteableBitmap(container, null) }
            };
        }
    }

rivate void OnDragQuery(object sender, DragDropQueryEventArgs e)
        {
            var cell = e.Options.Source as GridViewCell;
            GridViewDataControl gridView = cell.DataColumn.DataControl;
            if (e.Options.Status == DragStatus.DragQuery && gridView != null)
            {
                e.Options.Payload = gridView.SelectedItem;
                ContentControl cue = new ContentControl();
                cue.Content = ScreenshotVisualProvider.CreateDragVisual(cell);
                e.Options.DragCue = cue;
            }
            e.QueryResult = true;
        }

To be able to drag the GridViewCell rather than the Row, you need to set the AllowDrag property of the GridViewCell to true. 

<Style TargetType="telerik:GridViewCell">
                <Setter Property="telerik:RadDragAndDropManager.AllowDrag" Value="True"/>
                <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True"/>
            </Style>

As for the third question, there are various ways to implement it. For instance, If you use DragDropManager, you can use the DragEnter and DragLeave events to restyle the target element. 
However with the RadDragAndDropManager the implementation can get really tricky. You can use some kind of combination between row/cell style selectors and the DragDrop events, but it can get very complex. 
You can see a sample implementation of StyleSelectors in our examples here.

Hope this helps! If you need any further assistance, please don't hesitate to ask!

 All the best,
Nik
the Telerik team

[Goran]

Hi Nik, thanks for the response.

Forget about point 1, that has nothing to do with telerik controls, I was pretty tired when I wrote this, and that should have gone as a note for me. :)

Point 2, thanks for the info about WriteableBitmap. One typo you had, its DragDropManager.AllowDrag, not RadDragAndDropManager.AllowDrop. And since I am using DragDropManager, I need to use AddDragInitializeHandler. Anyway, that part I already knew, the mistory was WriteableBitmap.

One question: since I would like to visualize a cell which is not the same as the one I clicked to start dragging, I needed to find a way to select a cell on a grid. Is ChildrenOfType<T> the only way to get a reference to some cell?

Point 3, I know that MetroColors are available, but to my understanding, those colors are from Metro theme. I didn't find Windows7Colors, from Windows7Theme? Does this exist. How would I get colors for a hover over RadGridView state? Is getting manually by extracting the template the only way?

Thanks, again.

[Vanya Pavlova]

Hello Goran,

Sorry about the missunderstanding, about the DragDropManager.
You can get the cell you need from the Cells collection of the row that is about to be dragged.
Regarding your question about our themes - the styles used in our themes are theme specific, the resources they used too. If you want to alter the appearance of an element you should modify its template for the corresponding Telerik theme.  For example: if you want to style the hover effect of a row you should predefine its template and modify the brushes used by the element Background_Over. 
Hope this helps! 

Kind regards,
Vanya Pavlova
the Telerik team

[Kumar]

Hi,
I am novice to silverlight. I would like to know if dragging by cells vertically is possible using the telerik grid so that while dragging the cell value being dragged gets copied to the dragged cells like in excel. Appreciate your help.

[Nick]

Hello,

At the time, this feature is not available in RadGridView at the moment. You can log a feature request and vote for it in our Public Feedback Portal. 
RadGridView offers cell range selection, which allows selecting a region of cells by mouse dragging. 

Regards,
Nik
Telerik