jQWidgets Forums

This topic contains 7 replies, has 3 voices, and was last updated by aoverton07 12 years, 3 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Drag drop multiple rows grid to grid Posts

September 27, 2012 at 2:03 am Drag drop multiple rows grid to grid #8549

Member

I am looking for an example to do a multiple row select from one grid to another. I got the selection working but as I drag down it continues to select more rows. I am thinking I am suppose to do something on the onDrag event but not sure what.

Thanks

September 27, 2012 at 5:31 am Drag drop multiple rows grid to grid #8561

Peter Stoev

Keymaster

Hi cflocation,

Dragging of multiple rows when the selection mode is set to ‘multiplerowsextended’ is not supported. The reason is that selection mode uses dragging for the selection, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 27, 2012 at 5:33 am Drag drop multiple rows grid to grid #8563

cflocation

Member

Thanks Peter. Is there anyway to get multiple selections to a lower datagrid

Thanks

September 27, 2012 at 5:50 am Drag drop multiple rows grid to grid #8564

Peter Stoev

Keymaster

Hi cflocation,

Could you provide more details on that? What is the expected behavior?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 27, 2012 at 5:54 am Drag drop multiple rows grid to grid #8565

cflocation

Member

Sure

I have 2 datagrids the top one will be populated full of data and the bottom one will be blank. I want the users to be able to select 5 10 or whatever amount of rows and drag them to the bottom grid.

I get how to get the selected indexes and loop over them etc to insert into the bottom grid my only problem is the listener that is selected all the rows as I drag down. If I make it only multiple I am really close except when I go to click to drag them down it unchecks the one I click to drag.

Thanks

September 27, 2012 at 6:39 am Drag drop multiple rows grid to grid #8567

Peter Stoev

Keymaster

Hi cflocation,

Here’s a sample with drag and drop of multiple rows when selection mode is set to ‘multiplerows’.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var source =
            {
                localdata: generatedata(10),
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var columns = [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname' }
                ];
            // create data grids.
            $("#grid").jqxGrid(
            {
                width: 400,
                source: dataAdapter,
                theme: theme,
                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', theme: theme, 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.bind('dragStart', function (event) {
                var value = $(this).text();
                var cell = $("#grid").jqxGrid('getcellatposition', event.args.pageX, event.args.pageY);
                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);
                    }
                    $(this).jqxDragDrop({ data: rows })
                }
            });
            gridCells.bind('dragEnd', function (event) {
                var value = $(this).jqxDragDrop('data');
                var pageX = event.args.pageX;
                var pageY = event.args.pageY;
                var $form = $("#form");
                var targetX = $form.offset().left;
                var targetY = $form.offset().top;
                var width = $form.width();
                var height = $form.height();
                // fill the form if the user dropped the dragged item 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);
                        }
                    }
                }
            });
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="float: left;" id="grid">
        </div>
        <div style="margin-left: 20px; float: left; width: 400px; min-height: 100px; border: 1px solid #aaa;" id="form">
            <div>
                 Drop Here
            </div>
            <div id="dropPanel">
                
            </div>
        </div>
    </div>
</body>
</html>

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 27, 2012 at 6:42 am Drag drop multiple rows grid to grid #8568

cflocation

Member

Oh thank you this is a great start!

Thanks Peter

April 25, 2013 at 6:05 pm Drag drop multiple rows grid to grid #20038

aoverton07

Participant

I encountered the same problem with multiple row selection and drag and drop and i have created a solution!

I simply wrote my own selection handler.

In your jqxGrid define –> “selectionmode: none”

then below your bindings include the following code:

var lastRowClicked = 0;
document.getElementById("yourGridID").onclick = function (event) {
				if (event.ctrlKey==1) {
					var cell = $('#yourGridID').jqxGrid('getcellatposition', event.screenX, event.screenY - 64);
					var row = cell.row;
					$('#yourGridID').jqxGrid('selectrow', row-1);
					rowLastClicked = row-1;
					
				} else if ((event.shiftKey==1) && (rowLastClicked > 0)) {
					var shiftCell = $('#yourGridID').jqxGrid('getcellatposition', event.screenX, event.screenY - 64);
					var shiftRow = shiftCell.row - 1;
					if (shiftRow > rowLastClicked) {
						for(var i = rowLastClicked; i < shiftRow+1; i++) {
							$('#yourGridID').jqxGrid('selectrow', i);
						}
					}
					if (rowLastClicked > shiftRow) {
						for(var i = shiftRow; i < rowLastClicked; i++) {
							$('#yourGridID').jqxGrid('selectrow', i);
						}
					}
				
					//rowLastClicked = shiftRow;
					
				}
				else {
				
					var newCell = $('#yourGridID').jqxGrid('getcellatposition', event.screenX, event.screenY - 64);
					var newRow = newCell.row;
					$('#yourGridID').jqxGrid('clearselection');
					$('#yourGridID').jqxGrid('selectrow', newRow-1);
					rowLastClicked = newRow - 1;
					
				}
			}

if you notice above when i capture the click event i subtract 64 from the y coordinate, not sure why its 64 i just noticed that i needed an offset for the returned y value so you might have to play with that number to get the selection to work correctly but when its tuned in i think this actually works better than any of the given selection modes, you can control select rows, then also shift select without losing the selection of the rows selected with the control select.

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.