ript type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source =
            {
                localdata: generatedata(10),
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            var columns = [
                  { text: 'First Name', datafield: 'firstname', width: 250 },
                  { text: 'Last Name', datafield: 'lastname', width: 250 },
                  { text: 'Product', datafield: 'productname' }
                ];

            // create data grids.
            $("#grid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                ready: function()
                {
                    $("#grid").jqxGrid('selectrow', 0);
                    $("#grid").jqxGrid('selectrow', 2);
                    $("#grid").jqxGrid('selectrow', 6);
                },
                selectionmode: 'multiplerows',
                autoheight: true,
                columns: columns
            });
       
            // select all grid cells.
            var gridCells = $('#grid').find('.jqx-grid-cell');

            // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
            gridCells.jqxDragDrop({ appendTo: 'body',  dragZIndex: 99999,
                dropAction: 'none',
                initFeedback: function (feedback) {
                    var rowsindexes = $("#grid").jqxGrid('getselectedrowindexes');
                    feedback.height(25);
                    feedback.width( $("#grid").width());
                    feedback.css('background', '#aaa');
                }
            });

            // initialize the dragged object.
            gridCells.on('dragStart', function (event) {
                var value = $(this).text();
                var position = $.jqx.position(event.args);
                var cell = $("#grid").jqxGrid('getcellatposition', position.left, position.top);
                var rowsindexes = $("#grid").jqxGrid('getselectedrowindexes');
                
                var rows = [];
                var clickedrow = cell.row;
                var isselected = false;
                for (var i = 0; i < rowsindexes.length; i++) {
                    if (rowsindexes[i] == clickedrow) {
                        isselected = true;
                    }

                    rows[rows.length] = $("#grid").jqxGrid('getrowdata', rowsindexes[i]);
                }
                if (!isselected) {
                    $("#grid").jqxGrid('selectrow', cell.row);
                    rows[rows.length] = $("#grid").jqxGrid('getrowdata', cell.row);
                }

                if (rows.length > 0) {                 
                    // update feedback's display value.
                    var feedback = $(this).jqxDragDrop('feedback');
                    if (feedback) {
                        feedback.height(rows.length * 25 + 25);
                        var table = '<table>';
                        table += '<tr>';
                        $.each(columns, function (index) {
                            table += '<td style="width:' + this.width + 'px;">';
                            table += this.text;
                            table += '</td>';
                        });
                        table += '</tr>';
                        $.each(rows, function () {
                            table += '<tr>';
                            table += '<td>';
                            table += this.firstname;
                            table += '</td>';
                            table += '<td>';
                            table += this.lastname;
                            table += '</td>';
                            table += '<td>';
                            table += this.productname;
                            table += '</td>';
                            table += '</tr>';
                        });
                        table += '</table>';
                        feedback.html(table);
                    }
                    // set the dragged records as data
                    $(this).jqxDragDrop({ data: rows })
                }
            });

            gridCells.on('dragEnd', function (event) {
                var value = $(this).jqxDragDrop('data');
                var position = $.jqx.position(event.args);
                var pageX = position.left;
                var pageY = position.top;
                var $form = $("#form");

                var targetX = $form.offset().left;
                var targetY = $form.offset().top;
                var width = $form.width();
                var height = $form.height();

                // fill the element with rows if the user dropped the dragged items over it.
                if (pageX >= targetX && pageX <= targetX + width) {
                    if (pageY >= targetY && pageY <= targetY + height) {
                        if (value != null) {
                            var table = "<table>";
                            table += "<tr>";
                            for (var i = 0; i < columns.length; i++)
                            {
                                table += "<td>";
                                table += columns[i].text;
                                table += "</td>";
                            }
                            table += "</tr>";

                            for (var i = 0; i < value.length; i++) {
                                table += "<tr>";
                                table += "<td>";
                                table += value[i].firstname;
                                table += "</td>";
                                table += "<td>";
                                table += value[i].lastname;
                                table += "</td>";
                                table += "<td>";
                                table += value[i].productname;
                                table += "</td>";
                                table += "</tr>";
                            }
                            table += "</table>";
                            $("#dropPanel").html(table);
                        }
                    }
                }
            });

            $("#form").jqxExpander({  width: 850, toggleMode: 'none', showArrow: false });
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid">
        </div>
        <div style="margin-top: 20px;" id="form">
            <div>
                 Records
            </div>
            <div style="min-height: 100px;" id="dropPanel">
                <span style="position: relative; left: 50%; margin-left: -50px; top: 40px;">Drop Here</span>
            </div>
        </div>
    </div>
</body>
</html>