Drag n drop of rows or nodes between treegrids

Rows in any treegrid can be dragged and dropped to other treegrids and vice versa.

This is done by:

Related API:

Drag n drop multiple rows

First of all mutiple row selection is turned on or checkbox selection is turned on.

Then dragModel.dragNodes method is implemented as in this example to return array of selected or checked rows.


 
Name
Size
Modified Date
 
 
 
No rows to display.
Loading...
 
 
Name
Size
Modified Date
 
 
 
No rows to display.
Loading...


87
 
1
2
$(function () {
3
    function getObj() {
4
        return {
5
            height: 500,
6
            width: '44.9%',
7
            hoverMode: 'row',
8
            animModel: { on: true },
9
            numberCell: { show: false },
10
            dragModel: {
11
                on: true,
12
                diHelper: ['name'],
13
                diDrag: 'name', //name of the field in which drag handle is displayed.
14
                dragNodes: function (rd, evt) {
15
                    var checkNodes = this.Tree().getCheckedNodes();
16
                    return (checkNodes.length && checkNodes.indexOf(rd) > -1) ? checkNodes : [rd];
17
                },
18
                isDraggable: function (ui) {
19
                    //exclude summary rows and root nodes.
20
                    //return !(ui.rowData.pq_gsummary || ui.rowData.pq_level == 0);
21
22
                    //No need to exclude root nodes in v7.4
23
                    return !ui.rowData.pq_gsummary;
24
                }
25
            },
26
            dropModel: {
27
                on: true,
28
                divider: 200, //v7.4
29
                isDroppable: function (evt, uiDrop) {
30
31
                    var Drag = uiDrop.helper.data('Drag'),
32
                        uiDrag = Drag.getUI(),
33
                        rdDrag = uiDrag.rowData,
34
                        rdDrop = uiDrop.rowData,
35
                        Tree = this.Tree(),
36
                        denyDrop = (
37
                            rdDrop == rdDrag ||
38
                            (rdDrop && rdDrop.pq_gsummary) ||
39
                            (rdDrop && Tree.isAncestor(rdDrop, rdDrag))
40
                        );
41
42
                    return !denyDrop;
43
                }
44
            },
45
            treeModel: {
46
                dataIndx: 'name',
47
                select: true,
48
                chk_dataIndx: 'state',
49
                cascade: true,
50
                format: 'nested',
51
                showFolder: false,
52
                checkbox: true,
53
                summary: true,
54
                historyAdd: false, //7.4
55
                historyDelete: false, //7.4
56
                leafIfEmpty: true //7.4
57
            },
58
            sortModel: { ignoreCase: true },
59
            scrollModel: { autoFit: true },            
60
            wrap: false,
61
            columnTemplate: { minWidth: '10%', maxWidth: '80%', width: 100 },
62
            colModel: [
63
                { dataIndx: 'name', title: 'Name', width: 250 },
64
                {
65
                    dataIndx: 'size', title: 'Size', dataType: 'float', format: '#,###Bytes',
66
                    summary: { type: 'sum' }
67
                },
68
                { dataIndx: 'date', title: 'Modified Date', dataType: 'date' }
69
            ]           
70
        }
71
    }
72
73
    var obj1 = getObj();
74
    obj1.dataModel = {
75
        location: 'remote',
76
        url: '/pro2/Content/treegrid_data.json',
77
        getData: function (data) {
78
            return { data: data };
79
        }
80
    }
81
    pq.grid( "#dndgrid1", obj1 );
82
83
    
84
    pq.grid( "#dndgrid2", getObj() );
85
86
});
87
ParamQuery Pro Eval