Row drag drop re-ordering?

[Kenny]

Hello all,

Is there a way to re-order the rows of the RadGrid? I want the user to be able to drag and drop the rows to their desired position and save that position in the database? On my database right now, I already have a column, i.e., RowPosition, and it's default to the order in which the row has been added.

Thank you,

Kenny.

[Vlad]

Hi Kenny,

I've attached small demo to illustrate you how to achieve this.

Regards,
Vlad
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.

[Kenny]

Hi Vlad,

I'm having problem when trying to re-ordering the row, the problem is on this method:

private void UpdateIndicationAdornerPosition(MouseEventArgs args, double itemOffset)

        {

            Point point = args.GetPosition(this.gridView);

            this.indicationAdorner.TopOffset = point.Y + itemOffset - (this.indicationAdorner.DesiredSize.Height / 2);

        }

It saids that "Object reference not set to an instance of an object". (this.indicationAdorner is null when I hover my mouse over it.)

This is my code:

<telerik:RadGridView x:Name="RadGridSongs" Foreground="Black" Grid.Row="1" ShowGroupPanel="False" AutoGenerateColumns="False" IsFilteringAllowed="True" RowIndicatorVisibility="Visible" ColumnsWidthMode="Fill" VerticalAlignment="Stretch" telerik:StyleManager.Theme="Summer">
                        <telerik:RadGridView.Resources>
                            <ContextMenu x:Key="MyContextMenu" Opened="ContextMenu_Opened">
                                <MenuItem Header="Add To Setlist" Click="MenuItemAddToSetlist_Click">
                                    <MenuItem.Triggers>
                                        <EventTrigger RoutedEvent="Button.Click">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation
                                                    Storyboard.TargetName="theTransform"
                                                    Storyboard.TargetProperty="(RotateTransform.Angle)"
                                                    From="0" To="360" Duration="0:0:5" AutoReverse="True"/>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </MenuItem.Triggers>
                                </MenuItem>
                                <MenuItem Header="Edit Music Sheet Information" Click="MenuItemEditSongInfo_Click">
                                    <MenuItem.Triggers>
                                        <EventTrigger RoutedEvent="Button.Click">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation
                                                    Storyboard.TargetName="theTransform2"
                                                    Storyboard.TargetProperty="(RotateTransform.Angle)"
                                                    From="0" To="360" Duration="0:0:5" AutoReverse="True"/>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </MenuItem.Triggers>
                                </MenuItem>
                            </ContextMenu>
                        </telerik:RadGridView.Resources>

                        <telerik:RadGridView.Columns>
                            <telerik:GridViewDataColumn UniqueName="Title" HeaderText="Title" IsFilterable="False" />
                            <telerik:GridViewDataColumn UniqueName="Artist" HeaderText="Artist" Width="Auto" />
                            <telerik:GridViewDataColumn UniqueName="Key" HeaderText="Key" Width="Auto"/>
                            <!-- Hidden Columns For Search Purposes-->
                            <telerik:GridViewDataColumn UniqueName="Title2" HeaderText="Title2" IsVisible="False" />
                            <telerik:GridViewDataColumn UniqueName="Artist2" HeaderText="Artist2" IsVisible="False" />
                        </telerik:RadGridView.Columns>
                    </telerik:RadGridView>

This is the code behind:

private void BindGrid()
        {
            ObservableCollection<MusicSheetClass> allMusicSheets = new ObservableCollection<MusicSheetClass>();

            if (_isDrummer)
            {
                allMusicSheets = MusicSheetData.GetMusicSheetsDrummerObservableObjectData();
            }
            else
            {
                allMusicSheets = MusicSheetData.GetMusicSheetsObservableObjectData();
            }
            RadGridSongs.ItemsSource = allMusicSheets;
            GridViewRowDragDropManager rowDragDropManager = new GridViewRowDragDropManager(this.RadGridSongs, this.DropIndicator);
        }

I have all the DragDrop code in a seperate class library, and pretty much didn't change anything. Any idea why?

Thank you very much,

Kenny.

[Kenny]

My bad, I didn't have the Windows Resource section on the XAML code so it doesn't have the DropIndicator :)

Now a different question: Where should I have the code to find and update the position of all the rows so next time I load it, it will have the new positions?

Thanks again for your help Vlad,

Kenny.

[Pavel Pavlov]

Hello Kenny,

The order of the rows in the grid ( when not sorted ) depends on the original order in the source collection.  So if you  reorder your datasource collection ( the one assigned to RadGridView.ItemsSource property) it should reflect the order of the rows on screen. In case the collection is not capable of notifications ( e.g. it does not implement INotifyCollectionChanged) you may need to manually refresh the displayed values by calling the Rebind Method of the RadGridView or reassigning the ItemsSource property.

Best wishes,
Pavel Pavlov
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.

[Kenny]

Hi Pavel Pavlov,

It was able to re-order the position and reflects it on the screen, but I'm not sure where should I save the new positions to the database so that the next time I call up that same datasource, it has the new positions in place.

Thanks,

Kenny.

[Pavel Pavlov]

Hi Kenny,

Please have a look here. I believe the blog post covers your scenario.
Let me know in case you need further  assistance .


Kind regards,
Pavel Pavlov
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.

[Kenny]

Hi Pavel Pavlov,

Thanks again for your helps. I actually do need to save the position in the database because I will also using the same order in other places as well (I also need to bind that same data to a ComboBox). Can you advise on where to get the row position and save it on re-ordering?

Thanks a lot,

Kenny.

[Clinton van Ry]

Hi Pavel,

First thank you for you sample of drag and drop between rows. i have two simple questions

How do you make dropindicatoradoner disappear when you have moved past the boundaries of the gridviewcontrol (GridView)?
How do you drag and drop between two gridviews. i.e. the adoner should disappear from grid one but become visible in the second grid so that you can position in that grid?

The version of telerik product i have is 2009.2.701.35

Any sample code would be very helpful.

Thank you in advance

Clinton

[Pavel Pavlov]

Hello Clinton van Ry,

Please give me some more details about your scenario. What element of the grid would you like to drag/drop between two grids? Column headers, cells or rows ? Any more info will make it easier for me to prepare a sample.

Regards,
Pavel Pavlov
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.

[Clinton van Ry]

Hi Pavel Pavlov

The scenario i have is as follow:
Two grids named Grid1 and Grid2.
Grid1 has columns A, B, C, D
Grid2 has columns E, F, A, B
Each grid should be able to reordered there contents as in the previous sample. However you should be able to drag the rows from Grid1 to Grid2. This should create new rows in Grid 2 when dragged from Grid1. In this case clumns E, F should default to default values (in this example the index of the row).
e.g. Grid1 Row1 values are 1A, 1B, 1C, 1D, Row2 values are 2A, 2B, 2C,2D. When Row 2 from Grid 1 is dragged to Grid2 Row 1 the values should be for Grid 2 Row1 1E, 1F, 2A, 2B

The second part is when the row(s) is dragged from grid1 to grid2 then arrow adorner from grid 1 should not be visible when you have leave Grid1 boundaries and Grid2 arrow adorner should become visible with the new rows indicate the position.

I hope this make sense and is not too difficult?

Thank you in advance

Clinton

[Pavel Pavlov]

Hi ,
I have done my best to prepare a working sample with the requested behavior - drag/drop  and row placement between two grids with the described behavior of the arrow adorner.
Please see the project attached . You may use it as a starting point.
Since all the drag/drop related source is external to the grid and included in the project feel free to make any modifications to fit it to your scenario.

Best wishes,
Pavel Pavlov
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.

[Clinton van Ry]

Hi Pavel Pavlov

Thank you for sample snippet. It just what i was after.
Cheers
Clinton

[Ahmet Özgür]

Hi,

The version of the example code is different then the one i used. my version is 2009.3.1208.35.
is there a way to convert it. Because i get an error at
" RadItemsControl itemsControl = this.gridView.ItemsControl;"

Or is there another way to re order rows by drag and drop.

Regards.

[Milan]

Hello Ahmet Özgür,

Could you please take a look at the attached sample. It contains an implementation of drag and drop for grid rows.

Greetings,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Mattias Wiberg]

Hi!

I've adapted the above example to the latest Telerik build by changing:

RadItemsControl itemsControl =

this.gridView.ItemsControl;

 

 

this.currentDropIndex = itemsControl.Records.IndexOf(row.Record);

to:

 

 

this.currentDropIndex = gridView.Items.IndexOf(row.DataContext);

It kinda works, the problem is that the MouseUp-event does not seem to be raised at all. The same goes for MouseLeftButtonUp, but

 

MouseRightButtonDown is raised as expected...why is this?

Another issue:
I have a toplevel grid with a nested HierarchyChildTemplate and I want to be able to drag and drop in both grids. However, any dragging in the nested grid enables dragging on the parent row...is there any easy way to disable dragging on child templates?

Thanks in advance,
Mattias

[Milan]

Hi Mattias,

Most of the mouse event are now handled by RadGridView and as a result mouse events do not seem to be raised. Could you please take a look at this thread which provide more information about the changes.

In regards to the second issue, it should be fairly easy to disable row reordering since you are using HierarchyChildTemplate. 

First we should allow dragging of child grids and subscribe to their RowLoaded events:

<telerikGrid:RadGridView.HierarchyChildTemplate>
    <DataTemplate>
        <telerikGrid:RadGridView ItemsSource="{Binding RelatedMessages}" RowLoaded="RadGridView_RowLoaded"
                                 dragAndDrop:RadDragAndDropManager.AllowDrag="True"/>
    </DataTemplate>
</telerikGrid:RadGridView.HierarchyChildTemplate>

private void RadGridView_RowLoaded(object sender, Telerik.Windows.Controls.GridView.RowLoadedEventArgs e)
{
    var row = e.Row as GridViewRow;

    if (row != null)
    {
        row.SetValue(RadDragAndDropManager.AllowDragProperty, true);
        row.SetValue(RadDragAndDropManager.AllowDropProperty, true);
    }
}

And finally modify OnDragQuery method of the RowReorderBehavior class:

private void OnDragQuery(object sender, DragDropQueryEventArgs e)
        {
            var gridView = sender as RadGridView;
            var originalElement = e.OriginalSource as FrameworkElement;
            var parentGrid = originalElement as GridViewDataControl;
            parentGrid = parentGrid == null ? originalElement.ParentOfType<GridViewDataControl>() : parentGrid;

            if (gridView == null || gridView != parentGrid)
                return;

            e.QueryResult = this.InitiateDrag(gridView, e);
            e.Handled = true;
        }

hope this is helpful.

All the best,
Milan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[smthcrmnl]

Hi,

I used the first sample application from this thread. The re ordering of the rows works fine. But in my case I want to group the the gridview with a particular column (in the example project I grouped using Age column), if I try to re order a row it is throwing an exception. Any help will be really appreciated..

Thanks.

[Milan]

Hello smthcrmnl,

The sample seems to be working when grouping is applied. Could you please send us your project so that we can have a look?

Sincerely yours,
Milan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[smthcrmnl]

Hello Milan,

Thanks for the reply. I am actually grouping the gridview first and then trying to drag a row from one group to another group. Like In the example project I am grouping the gridview using Age column. If I drag a row from say Age group 10 to Age group 5 after dropping the row the age of the row from Age group 10 should be changed to Age 5. This is working without grouping the gridview. I am attaching the code with my changes which commented in GridViewDragDropManager.cs using Vlad project from the first post.

private void ReorderItems(GridViewRow row)
        {
            var source = this.gridView.ItemsSource as IList;
            if (source != null)
            {
                source.Remove(row.DataContext);

                if (source.Count < this.currentDropIndex.Value)
                {
                    this.currentDropIndex = source.Count;
                }

                //Change the group name of the element being dragged and dropped

                var item = this.gridView.SelectedItem as Customer;
                item.Age = (source[(int)currentDropIndex] as Customer).Age;

                source.Insert(this.currentDropIndex.Value, row.DataContext);

                this.gridView.Rebind();
            }
        }

private void RowMouseUp(object sender, MouseButtonEventArgs e)
        {
            GridViewRow row = sender as GridViewRow;

            //this.currentDropIndex = GetRowIndex(row, e);

            if (this.dragDropManager.ActiveDraggedElement != null && this.indicationAdorner != null)
            {
                AdornerLayer.GetAdornerLayer(this.gridView).Remove(this.indicationAdorner);
                this.indicationAdorner = null;
                this.ReorderItems(this.dragDropManager.ActiveDraggedElement as GridViewRow);

                //group the grid again after rebinding
                this.gridView.GroupDescriptions.Clear();
                this.gridView.GroupDescriptions.Add(new RadGroupDescription("Age"));

                this.currentDropIndex = null;
            }
        }

Thanks.

[Milan]

Hi smthcrmnl,

Unfortunately reordering in grouped scenarios does not make much sense in terms of reordering items in the source collection. Moreover, the version that you have makes the functionality event more difficult to implement. 

Do you really need to reorder items in the source collection or you just need to assign the respective Age when you drop row to a certain group? If you only need to assign the correct Age value you can do the following modifications to GridViewDragDropManager.cs:

private void ReorderItems(GridViewRow row)
{
    var item = (row.Record as DataRecord).Data as Customer;
    item.Age = ((this.rowUnderMouse.Record as DataRecord).Data as Customer).Age;

    var source = this.gridView.ItemsSource as IList;

    if (source != null && this.currentDropIndex >= 0)
    {
        source.Remove(row.DataContext);

        if (source.Count < this.currentDropIndex.Value)
        {
            this.currentDropIndex = source.Count;
        }

        source.Insert(this.currentDropIndex.Value, row.DataContext);
    }

    this.gridView.Rebind();
}

private GridViewRow rowUnderMouse;

private void RowMouseMove(object sender, MouseEventArgs e)
{
    var row = sender as GridViewRow;
    if (row != null && this.dragDropManager.ActiveDraggedElement != null)
    {
        if (this.indicationAdorner == null)
        {
            if (this.dropIndicator != null)
            {
                this.dropIndicator.Width = this.gridView.ActualWidth;
                this.indicationAdorner = new DropIndicationAdorner(this.gridView, this.dropIndicator);
                AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(this.gridView);
                adornerLayer.Add(this.indicationAdorner);
            }
        }

        this.rowUnderMouse = row;
        RadItemsControl itemsControl = this.gridView.ItemsControl;
        this.currentDropIndex = itemsControl.Records.IndexOf(row.Record);

        double rowHeight = row.DesiredSize.Height;
        Point point = e.GetPosition(row);
        double itemOffset = -point.Y;
        if (point.Y > rowHeight / 2)
        {
            itemOffset = rowHeight - point.Y;
            this.currentDropIndex++;
        }
        this.UpdateIndicationAdornerPosition(e, itemOffset);
    }
}

Regards,

Milan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[smthcrmnl]

Thanks for the reply. I made the changes as you said and the example is working as expected. I replaced the ddl's with the 2009 release 3 and the application is not working, some of the properties/methods are not supported in this example. Currently the dll's in the example project is 2009 release 1.

[Snehal]

I have downloaded rowreorderwpf-2.zip example but it is not converting to  vs2010.

can u plz provide me for the same.

Thanks!!!

[Vlad]

Hello,

 Please check this demo for more info about how to reorder rows using RadDragAndDropManager - you need to download and run the example locally.

Sincerely yours,
Vlad
the Telerik team

[Snehal]

Hi

am not able to see a demo. its giving a message. "Example not supported in X. Please run this example locally." but not able to find download link.

Thanks

[wael khair allah]

Hello All,

can any one provide me code for re-order rows after drag drop in radgridview in winform using vb.net .
 i tried to make it but faced many cases and problem . 

also another question how i can change row backcolor at runtime without using event  row_formating .

Many Thanks  for All .
Best Regards.