Reordering Columns

8 posts, 1 answers
  1. Paul
    Paul avatar
    35 posts
    Member since:
    Aug 2015

    Posted 22 Dec 2016 Link to this post

    I'm new to the Virtual Grid. I can't seem to figure out how to allow the user to reorder the columns. Because the columns are built based on the OnCellValueNeeded event, I assume the reordering will have to be done here. But how can I show the dragging of a column and detect where it was dropped?

  2. Hristo
    Admin
    Hristo avatar
    1504 posts

    Posted 23 Dec 2016 Link to this post

    Hi Paul,

    Thank you for writing.

    Reordering the columns of RadVirtualGrid is not supported. You can achieve the desired result by forcing an update and applying a new order.

    The sample project features a solution with a RadListView populated with the column names. You would be able to reorder the list view items which will sync to the grid.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Paul
    Paul avatar
    35 posts
    Member since:
    Aug 2015

    Posted 27 Dec 2016 in reply to Hristo Link to this post

    While this does allow me to reorder the columns, it seems sloppy from a user end point (no offense). Is there no way to access the backing column object? Because I could then simulate the drag effect and detect where its being released to get the target index. Give it the feel that users are use to.
  4. Paul
    Paul avatar
    35 posts
    Member since:
    Aug 2015

    Posted 27 Dec 2016 in reply to Paul Link to this post

    I think I see why you can do what I'm asking. The virtual grid is designed to load rows virtually, so it uses row objects and there is no "column". It appears to have columns from the stacked rows. right?
  5. Paul
    Paul avatar
    35 posts
    Member since:
    Aug 2015

    Posted 27 Dec 2016 in reply to Paul Link to this post

    can't*
  6. Answer
    Hristo
    Admin
    Hristo avatar
    1504 posts

    Posted 28 Dec 2016 Link to this post

    Hi Paul,

    Thank you for writing.

    The virtual grid loads data based on the passed indices. In this respect, reordering the columns would need to trigger a CellValueNeeded event and the visible data be reloaded. The suggested approach in my previous post can be also achieved by using the standard OLE drag and drop support.

    I am sending you attached a sample project demonstrating the drag and drop behavior. The key in this solution as in the previous one is by reordering the columns of the grid to also change the order in which you are populating the data.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Paul
    Paul avatar
    35 posts
    Member since:
    Aug 2015

    Posted 28 Dec 2016 in reply to Hristo Link to this post

    Perfect. Had to fix one small bug in your code and it does exactly what I need. Thank you!!

    Bug Fix: in radVirtualGrid1_DragDrop remove column before inserting.

    private void radVirtualGrid1_DragDrop(object sender, DragEventArgs e)
            {
                VirtualGridHeaderCellElement source = e.Data.GetData(typeof(VirtualGridHeaderCellElement)) as VirtualGridHeaderCellElement;
                Point mousePosition = this.radVirtualGrid1.VirtualGridElement.ElementTree.Control.PointToClient(Control.MousePosition);
                VirtualGridHeaderCellElement target = this.radVirtualGrid1.ElementTree.GetElementAtPoint(mousePosition) as VirtualGridHeaderCellElement;
                if (target != null)
                {
                    int s = visibleColumns.IndexOf(source.Text);
                    int t = visibleColumns.IndexOf(target.Text);
     
                    // remove before insert as inserting first changes the index of the item being removed.
                    visibleColumns.RemoveAt(s);
                    visibleColumns.Insert(t, source.Text);
     
                    foreach (VirtualGridRowElement rowElement in
                    this.radVirtualGrid1.VirtualGridElement.TableElement.GetDescendants(delegate(RadElement x) { return x is VirtualGridRowElement; }, TreeTraversalMode.BreadthFirst))
                    {
                        rowElement.CellContainer.Children.Clear();
                    }
                }
            }
  8. Hristo
    Admin
    Hristo avatar
    1504 posts

    Posted 29 Dec 2016 Link to this post

    Hi Paul,

    I am glad that this solution is working well in your project. Regarding the correction, indeed you are right.

    Please let me know if you need further assistance.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 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