jQuery/javascript Grid drag and drop rows between two grids

Drag n drop of rows between grids

Rows in any grid can be dragged and dropped to other grids and vice versa.

This is done by:

turning on dragModel in draggable grid and dropModel in droppable grid.
dragModel.clsDnD and dropModel.accept play crucial role in creating draggable / droppable relation between grids.
Drag handle are displayed in number cells by default (as in this example), they can also be displayed in other cells by dragModel.diDrag option.
dragModel.isDraggable is used to set up conditional rules for selective dragability of rows.
dropModel.isDroppable is used to set up conditional rules for selective droppability over rows.
dropModel.drop callback does the actual manipulation of moving or copying rows when dragged row objects are finally dropped on destination rows. Grid has default implementation for this callback which takes care of most of the cases, however it can be overridden to customize the end result.

Related API:

Options: dragModel, dropModel
Methods: Drag, addNodes, deleteNodes

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 to return array of selected or checked rows.

Javascript
HTML


69
 
1
2
    $(function () {
3
        var config = function () {
4
            return {
5
                height: 500,
6
                width: '45%',
7
                colModel: [
8
                    { title: "Order ID", dataIndx: "OrderID" },
9
                    { title: "Customer Name", dataIndx: "CustomerName" },
10
                    { title: "Product Name", dataIndx: "ProductName" },
11
                    { title: "Unit Price", dataIndx: "UnitPrice", dataType: 'float', format: '$#,###.00' },
12
                    { title: "Quantity", dataIndx: "Quantity", dataType: 'integer' },
13
                    { title: "Order Date", dataIndx: "OrderDate" },
14
                    { title: "Required Date", dataIndx: "RequiredDate" },
15
                    { title: "Shipped Date", dataIndx: "ShippedDate" },
16
                    { title: "ShipCountry", dataIndx: "ShipCountry" },
17
                    { title: "Freight", align: "right", dataIndx: "Freight" },
18
                    { title: "Shipping Name", dataIndx: "ShipName" },
19
                    { title: "Shipping Address", dataIndx: "ShipAddress" },
20
                    { title: "Shipping City", dataIndx: "ShipCity" },
21
                    { title: "Shipping Region", dataIndx: "ShipRegion" },
22
                    { title: "Shipping Postal Code", dataIndx: "ShipPostalCode", minWidth: 150 }
23
                ],
24
                columnTemplate: {
25
                    width: 120
26
                },
27
                numberCell: {
28
                    width:50
29
                },
30
                dataModel: {
31
                    location: "remote",
32
                    dataType: "JSON",
33
                    method: "GET",
34
                    url: "/Content/invoice.json",
35
                    getData: function (res) {
36
                        res.data = res.data.slice(0, 15);
37
                        return res;
38
                    }
39
                },
40
                complete: function () {
41
                    this.flex();
42
                },
43
                dragModel: {
44
                    on: true,
45
                    clsDnD: 'dnd1',
46
                    diHelper: ['OrderID']
47
                },
48
                dropModel: {
49
                    on: true,
50
                    accept: '.dnd2'
51
                },
52
                //pageModel: { type: 'local', rPP: 20, rPPOptions: [1, 10, 20, 30, 40, 50, 100] },                                   
53
                title: "Shipping Orders"
54
            }
55
        }
56
        
57
58
        //first grid.
59
        $("#dndgrid1").pqGrid( config() );
60
        
61
        //2nd grid
62
        var obj = config();
63
        obj.dragModel.clsDnD = "dnd2";
64
        obj.dropModel.accept = ".dnd1";
65
66
        $("#dndgrid2").pqGrid( obj );        
67
     
68
    });
69