Possible to drag and drop columns from one grid to another?

10 posts, 0 answers
  1. Howard
    Howard avatar
    2 posts
    Member since:
    Sep 2015

    Posted 12 Sep 2015 Link to this post

    Hi all,

    I am trying to drag and drop columns from grid1 to grid2 without any luck.

    Found a example here on how to drag and drop rows :

    http://www.telerik.com/help/winforms/gridview-rows-drag-and-drop.html

     

    I searched for the same but then with columns instead of rows but i could not find any examples,so i am not sure if it even is possible to do it?

    If it is possible does anyone know about a example or a tutorial on how to do this?

     

    best regards,

    H

     

     
  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3451 posts

    Posted 14 Sep 2015 Link to this post

    Hello Howard,

    Thank you for writing.
     
    RadGridView handles the whole drag and drop operation by RadGridViewDragDropService. The PreviewDragOver event allows you to control on what targets the item being dragged can be dropped on. The PreviewDragDrop event allows you to get a handle on all the aspects of the drag and drop operation, the source (drag) grid, the destination (target) grid, as well as the item being dragged. This is where we will initiate the actual physical move of the dragged item(s) from one grid to the other. In order to implement drag and drop functionality of a column from one grid to another, you can use the sample approach below:
    public Form1()
    {
        InitializeComponent();
     
        RadDragDropService svc =
            this.radGridView1.GridViewElement.GetService<RadDragDropService>();
        svc.PreviewDragStart += svc_PreviewDragStart;
        svc.PreviewDragDrop += svc_PreviewDragDrop;
        svc.PreviewDragOver += svc_PreviewDragOver;
    }
     
    private void svc_PreviewDragStart(object sender, PreviewDragStartEventArgs e)
    {
        e.CanStart = true;
    }
     
    private void svc_PreviewDragOver(object sender, RadDragOverEventArgs e)
    {
        SnapshotDragItem draggedItem = e.DragInstance as SnapshotDragItem;
        GridHeaderCellElement targetHeaderCell = e.HitTarget as GridHeaderCellElement;
        if (draggedItem != null && targetHeaderCell != null)
        {
            GridHeaderCellElement sourceHeaderCell = draggedItem.Item as GridHeaderCellElement;
            if (sourceHeaderCell != null && targetHeaderCell.GridViewElement != sourceHeaderCell.GridViewElement)
            {
                e.CanDrop = true;
            }
            else
            {
                e.CanDrop = false;
            }
        }
    }
     
    private void svc_PreviewDragDrop(object sender, RadDropEventArgs e)
    {
        SnapshotDragItem draggedItem = e.DragInstance as SnapshotDragItem;
        GridHeaderCellElement targetHeaderCell = e.HitTarget as GridHeaderCellElement;
        if (draggedItem == null || targetHeaderCell == null)
        {
            return;
        }
        GridHeaderCellElement sourceHeaderCell = draggedItem.Item as GridHeaderCellElement;
        if (sourceHeaderCell != null)
        {
            e.Handled = true;
            sourceHeaderCell.GridViewElement.Template.Columns.Remove(sourceHeaderCell.ColumnInfo.Name);
            GridViewTemplate targetTemplate = targetHeaderCell.GridViewElement.Template;
            targetTemplate.Columns.Insert(targetTemplate.Columns.IndexOf(targetHeaderCell.ColumnInfo.Name),
                sourceHeaderCell.ColumnInfo as GridViewDataColumn );
        }
    }

    Note that this is just an example and it may not cover all possible cases. Feel free to modify it on a way which suits your requirement best.

    I hope this information helps. Should you have further questions I would be glad to help.
     
    Regards,
    Dess
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. Howard
    Howard avatar
    2 posts
    Member since:
    Sep 2015

    Posted 17 Sep 2015 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Thanks a lot Dess!
  4. Bruno
    Bruno avatar
    7 posts
    Member since:
    Sep 2017

    Posted 05 Dec 2017 Link to this post

    I am trying to use this solution. The .Gif show exactly what i need to do.

     

    The issue i got is that when i select a column i get a Red X mark on my cursor and won't let me move it.

    is there a MasterGrid of some other radGridView Config im missing?

  5. Bruno
    Bruno avatar
    7 posts
    Member since:
    Sep 2017

    Posted 05 Dec 2017 in reply to Bruno Link to this post

    I partially found my problem but i don't have solution to it.

    The issues i get is that my grid2 is totally empty. therefor i can't drop a column into it.

    if i create an empty grid with grid2.ColumnCount = 10; grid2.RowCount = 10; it let me drag stuff properly into it.

    is there a way to add column and rows size dynamically?

     

  6. Dimitar
    Admin
    Dimitar avatar
    2818 posts

    Posted 07 Dec 2017 Link to this post

    Hi Bruno,

    In the PreviewDragOver event handler, you can specify on which elements you can drop the row. In the example, you can drop on particular cells only. In your case you need to drop on an empty GridTableElement:
    private void svc_PreviewDragOver(object sender, RadDragOverEventArgs e)
    {
        if (e.HitTarget is GridTableElement)
        {
            e.CanDrop = true;
        }
    }

    I hope this will be useful. Let me know if you have additional questions.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Bruno
    Bruno avatar
    7 posts
    Member since:
    Sep 2017

    Posted 07 Dec 2017 in reply to Dimitar Link to this post

    Thank you!

    I've got another question!

    Grid2 got 3-10 column that was Generated programmaly and no Rows.

    Let's say i'm trying to move The Data from a column "All rows" from Grid1 and drop the data into an pre-existing column in Grid2.

    I'm experimenting with a for loop but don't have any luck with it yet.

    Thank you for your support!

  8. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3451 posts

    Posted 11 Dec 2017 Link to this post

    Hello, Bruno, 

    Thank you for writing back. 

    I would recommend you to have a look at the following help article: https://docs.telerik.com/devtools/winforms/gridview/rows/drag-and-drop

    It demonstrates a sample approach how to drag a row from one grid to another. You have full control over the drag and drop process. Hence, it is up to you what row exactly will be added to the target grid. Have in mind that if the grid is in bound mode, it is necessary to insert the new record in the DataSource collection, not the Rows collection of the RadGridView.

    If you are still experiencing any further difficulties, feel free to submit a support ticket where you can attach a sample project. Thus, our support staff will gladly assist you.

    I hope this information helps.

     Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Bruno
    Bruno avatar
    7 posts
    Member since:
    Sep 2017

    Posted 11 Dec 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Thank you for the reply.

    I've manage to perform what i tried to do with a simple for loop in the end.

    private void svc_PreviewDragDrop(object sender, RadDropEventArgs e)
            {
                SnapshotDragItem draggedItem = e.DragInstance as SnapshotDragItem;
                GridHeaderCellElement targetHeaderCell = e.HitTarget as GridHeaderCellElement;
                if (draggedItem == null || targetHeaderCell == null)
                {
                    return;
                }
                GridHeaderCellElement sourceHeaderCell = draggedItem.Item as GridHeaderCellElement;
                if (sourceHeaderCell != null)
                {
                    e.Handled = true;      
                    for (int i = 0; i < gridSource.RowCount; i++)
                    {
                        gridTarget.Rows[i].Cells[targetHeaderCell.ColumnIndex].Value = gridSource.Rows[i].Cells[sourceHeaderCell.ColumnIndex].Value;
                    }      
                }
            }
  10. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3451 posts

    Posted 12 Dec 2017 Link to this post

    Hello, Bruno, 

    Thank you for writing back. 

    I am glad that the referred help article was useful for achieving your goal. Thank you for sharing the code snippet with the community.

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top