jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Drag a row from one grid to another
This topic contains 11 replies, has 5 voices, and was last updated by Dimitar 6 years, 6 months ago.
-
Author
-
Hi,
Can someone help me with this? I have a grid-to-form setup that works perfectly, with the grid populated from my database via JSON. I have gone through the code on your drag-drop demo page, showing images of T-shirts that can be dragged into a shopping cart.
This is clearly what I need, but I couldn’t quite make my version work. My version has no pictures, just lines that need to be dragged into an empty grid, from where I can save them to the database.
Thanks very much,
SPHello SP,
Another useful example is the Drag to a Form demo. In it, you can see how to drag from a grid. In the jqxDragDrop Default Functionality demo is shown how to drag to a grid.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Okay, I wasn’t very clear when I tried to explain! I already know how to drag from a grid to a form, as I said above. I used the Drag to a Form demo to achieve my current solution.
And I have gone through the Default Functionality demo with a fine tooth comb, so I know that demo well too. But the two ways of coding are very different between the Drag to Form demo and the Default Functionality demo. One is quite straightforward, but the other has classes. After many attempts to blend the two ways of doing it, I still can’t figure it out.
I am very familiar with both demos. But the Default one uses pictures, each picture apparently being an object with a property. I am dragging a line, not an image object.
Thanks
SPHi SP,
Here is an example based on the demo Drag to a Form:
<!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.3.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/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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 = getDemoTheme(); 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: 100 }, { text: 'Last Name', dataField: 'lastname', width: 100 }, { text: 'Product', dataField: 'productname' } ]; // create data grids. $("#grid").jqxGrid( { width: 400, source: dataAdapter, theme: theme, autoheight: true, pageable: true, sortable: true, columns: columns, rendered: function () { // select all grid cells. var gridCells = $('#grid').find('.jqx-grid-cell'); if ($('#grid').jqxGrid('groups').length > 0) { gridCells = $('#grid').find('.jqx-grid-group-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) { feedback.height(70); feedback.width(220); } }); // initialize the dragged object. gridCells.off('dragStart'); gridCells.on('dragStart', function (event) { var value = $(this).text(); var position = $.jqx.position(event.args); var cell = $("#grid").jqxGrid('getcellatposition', position.left, position.top); $(this).jqxDragDrop('data', $("#grid").jqxGrid('getrowdata', cell.row)); var groupslength = $('#grid').jqxGrid('groups').length; // update feedback's display value. var feedback = $(this).jqxDragDrop('feedback'); var feedbackContent = $(this).parent().clone(); var table = '<table>'; $.each(feedbackContent.children(), function (index) { if (index < groupslength) return true; table += '<tr>'; table += '<td>'; table += columns[index - groupslength].text + ': '; table += '</td>'; table += '<td>'; table += $(this).text(); table += '</td>'; table += '</tr>'; }); table += '</table>'; feedback.html(table); }); gridCells.off('dragEnd'); 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 $destination = $("#destinationGrid"); var targetX = $destination.offset().left; var targetY = $destination.offset().top; var width = $destination.width(); var height = $destination.height(); if (pageX >= targetX && pageX <= targetX + width) { if (pageY >= targetY && pageY <= targetY + height) { $destination.jqxGrid('addrow', null, value); } } }); } }); $("#destinationGrid").jqxGrid( { height: 335, width: 400, theme: theme, keyboardnavigation: false, selectionmode: 'none', columns: [ { text: 'First Name', dataField: 'firstname', width: 100 }, { text: 'Last Name', dataField: 'lastname', width: 100 }, { text: 'Product', dataField: 'productname' } ] }); }); </script></head><body class='default'> <div id='jqxWidget'> <div id="grid"> </div> </div> <br /> <div id="destinationGrid"> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks very much Dimitar! Will give this a try now that my workload is lighter.
Thanks again, Dimitar! This is exactly what I was looking for. (I’m still on that steep jQuery learning curve, with not much time …)
Regards
SPI have a very similar setup like the one named in the starting post. Basically I try to drag rows from one grid into another. I tried the solution posted by Dimitar but sadly its not working for me. When I try to drag a cell a copy of it gets displaced in the top left corner and does not move. I can’t figure out why this happens.
Hello norathem,
The example made use of the now obsolete function getDemoTheme. Please try the following updated version. It works fine on our side with jQWidgets version 3.7.1.
<!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.11.1.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/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.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: 100 }, { text: 'Last Name', dataField: 'lastname', width: 100 }, { text: 'Product', dataField: 'productname' } ]; // create data grids. $("#grid").jqxGrid( { width: 400, source: dataAdapter, autoheight: true, pageable: true, sortable: true, columns: columns, rendered: function () { // select all grid cells. var gridCells = $('#grid').find('.jqx-grid-cell'); if ($('#grid').jqxGrid('groups').length > 0) { gridCells = $('#grid').find('.jqx-grid-group-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) { feedback.height(70); feedback.width(220); } }); // initialize the dragged object. gridCells.off('dragStart'); gridCells.on('dragStart', function (event) { var value = $(this).text(); var position = $.jqx.position(event.args); var cell = $("#grid").jqxGrid('getcellatposition', position.left, position.top); $(this).jqxDragDrop('data', $("#grid").jqxGrid('getrowdata', cell.row)); var groupslength = $('#grid').jqxGrid('groups').length; // update feedback's display value. var feedback = $(this).jqxDragDrop('feedback'); var feedbackContent = $(this).parent().clone(); var table = '<table>'; $.each(feedbackContent.children(), function (index) { if (index < groupslength) return true; table += '<tr>'; table += '<td>'; table += columns[index - groupslength].text + ': '; table += '</td>'; table += '<td>'; table += $(this).text(); table += '</td>'; table += '</tr>'; }); table += '</table>'; feedback.html(table); }); gridCells.off('dragEnd'); 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 $destination = $("#destinationGrid"); var targetX = $destination.offset().left; var targetY = $destination.offset().top; var width = $destination.width(); var height = $destination.height(); if (pageX >= targetX && pageX <= targetX + width) { if (pageY >= targetY && pageY <= targetY + height) { $destination.jqxGrid('addrow', null, value); } } }); } }); $("#destinationGrid").jqxGrid( { height: 335, width: 400, keyboardnavigation: false, selectionmode: 'none', columns: [ { text: 'First Name', dataField: 'firstname', width: 100 }, { text: 'Last Name', dataField: 'lastname', width: 100 }, { text: 'Product', dataField: 'productname' } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="grid"> </div> </div> <br /> <div id="destinationGrid"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I am trying to get a grid row to grid drag and drop working using the above. When I select the row to be dragged the cell value that I am on shows up at the top of the page in the feedback? area and that is all. Any cell I select shows at the top of the page but just that data.
Trying to put some alerts into the code I find that the groupslength is always 0. Below is my code for the grid I am trying to drag from. Any help would be appreciated.
// Initialize the main datagrid $("#electivesGrid").jqxGrid( { height: 500, width: 800, source: gridDataAdapter, theme: 'energyblue', pageable: true, sortable: true, columns: [ { text: 'Class Code', datafield: 'classCode', width: 80 }, { text: 'Course Name', datafield: 'courseName', width: 300 }, { text: 'Start Date', datafield: 'startDate', width: 100 }, { text: 'End Date', datafield: 'endDate', width: 100 }, { text: 'Institution', datafield: 'institution', width: 200 } ], rendered: function () { // select all grid cells. var gridCells = $('#electivesGrid').find('.jqx-grid-cell'); if ($('#electivesGrid').jqxGrid('groups').length > 0) { gridCells = $('#electivesGrid').find('.jqx-grid-group-cell'); } // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid. gridCells.jqxDragDrop({ appendTo: 'body', theme: 'energyblue', dragZIndex: 99999, dropAction: 'none', initFeedback: function (feedback) { feedback.height(100); feedback.width(300); } }); // initialize the dragged object. gridCells.off('dragStart'); gridCells.on('dragStart', function (event) { var value = $(this).text(); var position = $.jqx.position(event.args); var cell = $("#electivesGrid").jqxGrid('getcellatposition', position.left, position.top); $(this).jqxDragDrop('data', $("#electivesGrid").jqxGrid('getrowdata', cell.row)); var groupslength = $('#electivesGrid').jqxGrid('groups').length; alert(groupslength); // update feedback's display value. var feedback = $(this).jqxDragDrop('feedback'); var feedbackContent = $(this).parent().clone(); var table = '<table>'; $.each(feedbackContent.children(), function (index) { if (index < groupslength) return true; table += '<tr>'; table += '<td>'; table += columns[index - groupslength].text + ': '; table += '</td>'; table += '<td>'; table += $(this).text(); table += '</td>'; table += '</tr>'; }); table += '</table>'; feedback.html(table); }); gridCells.off('dragEnd'); 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 $destination = $("#selectionGrid"); var targetX = $destination.offset().left; var targetY = $destination.offset().top; var width = $destination.width(); var height = $destination.height(); if (pageX >= targetX && pageX <= targetX + width) { if (pageY >= targetY && pageY <= targetY + height) { $destination.jqxGrid('addrow', null, value); } } }); } });
Hello Eric,
You have not enabled the grid’s grouping functionality and have not grouped by any group, that is why groupslength is always 0, but this is irrelevant to the issue you experience.
Is there any error thrown in your browser’s console when trying to drag a row? Please make sure you have referenced all necessary jQWidgets scripts in your page and that you are using the latest version – 3.8.2.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar, i’am using jqwidgets 4.5.0 and i’am trying to implement this functionality of drag and drop of a row from one grid to another, i followed the method you posted but i’am getting the same results as Eric, when i select a row it doesen’t get Selected, instead a cell is selected and gets shown in the left top corner, what could be causing this error? also i have this error on my console “ReferenceError: columns is not defined
at HTMLDivElement.<anonymous>” . any help would be appreciated .Hello pandemonium,
Here is a live version of above example you can test online: https://jseditor.io/?key=jqxgrid-drag-row. It works as expected with the latest version of jQWidgets (5.7.2).
Please note that the columns array has to be defined before the initialization code of the first grid so that it can later be referenced in the dragStart event handler.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.