This is a migrated thread and some comments may be shown as answers.

Reordering Columns

7 Answers 121 Views
VirtualGrid
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 22 Dec 2016, 10:51 PM

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?

7 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 23 Dec 2016, 02:54 PM
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 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.
0
Paul
Top achievements
Rank 1
answered on 27 Dec 2016, 03:39 PM
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.
0
Paul
Top achievements
Rank 1
answered on 27 Dec 2016, 03:55 PM
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?
0
Paul
Top achievements
Rank 1
answered on 27 Dec 2016, 03:55 PM
can't*
0
Accepted
Hristo
Telerik team
answered on 28 Dec 2016, 03:01 PM
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.
0
Paul
Top achievements
Rank 1
answered on 28 Dec 2016, 04:18 PM

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();
                }
            }
        }
0
Hristo
Telerik team
answered on 29 Dec 2016, 10:40 AM
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.
Tags
VirtualGrid
Asked by
Paul
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Paul
Top achievements
Rank 1
Share this question
or