jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Drag and Drop From Grid to Tree
This topic contains 3 replies, has 3 voices, and was last updated by Rubi 6 years ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Author
-
Has anyone been able to succesfully implement drag and drop between a grid and tree? I have gotten extremely close. My code works but it will only work correctly after I drag and drop an item from the tree. For some reason, doing this makes hitTest return a value. If i do not drag an item from the tree, hitTest will return null.
$('#treeA').jqxGrid( { width: 820, height: 750, rowsheight: 20, source: dataAdapter, theme: theme, sortable: true, filterable: true, selectionmode: 'none', showfilterrow: true, columnsreorder: true, columnsresize: true, columns: [ { text: 'ID', filtertype: 'none', datafield: 'EmployeeID', width: 140 }, { text: 'First Name', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'FirstName', width: 150 }, { text: 'Last Name', datafield: 'LastName', width: 150 }, { text: 'Title', datafield: 'Title', width: 240 }, { text: 'Address', datafield: 'Address', width: 240 }, { text: 'City', filtertype: 'checkedlist', datafield: 'City', width: 150 }, { text: 'Country', filtertype: 'checkedlist', datafield: 'Country', width: 180 }, ] }); $('#treeA').on("bindingcomplete", function(event) { // select all grid cells. var gridCells = $('#treeA .jqx-grid-content').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 = $('#treeA').jqxGrid('getselectedrowindexes'); feedback.height('2px'); feedback.width('200px'); feedback.css('background', '#FFFFFF'); feedback.css('font-size', '10px'); feedback.css('color', 'black'); } }); // initialize the dragged object. gridCells.on('dragEnd', function(event) { var ev = event.args.originalEvent; var x = ev.pageX; var y = ev.pageY; if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) { var touch = event.args.originalEvent.originalEvent.changedTouches[0]; x = touch.pageX; y = touch.pageY; } var itemht = $("#treeB").jqxTree('hitTest', x, y); if (itemht) { alert(itemht.label); } return false; }); }); $('#treeB').on('initialized', function (event) { $("#dragStartLog").text("Drag Start: " + event.args.label); $("#dragEndLog").text(""); }); $('#treeB').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme, dragEnd: function (item, dropItem, args, dropPosition, tree) { if (item.label == "Forum") return false; } }); $("#treeA, #treeB").on('dragStart', function (event) { $("#dragStartLog").text("Drag Start: " + event.args.label); $("#dragEndLog").text(""); });
Hi Alex,
I prepared a small sample for you. When a Cell is dropped over a tree item, a popup is displayed. Hope this helps you.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to setup a one way drag and drop from a Grid to another Grid.</title> <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.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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="../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.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(100), datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' } ], datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); $("#tree").jqxTree({ width: 200, height: 200 }); // create data grids. $("#grid1").jqxGrid( { width: 450, source: dataAdapter, pageable: true, autoheight: true, sortable: true, rendered: function(type) { // select all grid cells. var gridCells = $('#grid1').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) { feedback.height(25); }, dropTarget: $('#grid2'), revert: true }); gridCells.off('dragStart'); gridCells.off('dragEnd'); gridCells.off('dropTargetEnter'); gridCells.off('dropTargetLeave'); // disable revert when the dragged cell is over the second Grid. gridCells.on('dropTargetEnter', function () { gridCells.jqxDragDrop({ revert: false }); }); // enable revert when the dragged cell is outside the second Grid. gridCells.on('dropTargetLeave', function () { gridCells.jqxDragDrop({ revert: true }); }); // initialize the dragged object. gridCells.on('dragStart', function (event) { var value = $(this).text(); var position = $.jqx.position(event.args); var cell = $("#grid1").jqxGrid('getcellatposition', position.left, position.top); $(this).jqxDragDrop('data', { value: value }); }); // set the new cell value when the dragged cell is dropped over the second Grid. gridCells.on('dragEnd', function (event) { var value = $(this).text(); var position = $.jqx.position(event.args); $("#tree").jqxTree('_syncItems', $("#tree").find('.draggable')); var item = $("#tree").jqxTree('hitTest', position.left, position.top); alert(item.label); }); }, theme: theme, selectionmode: 'singlecell', columns: [ { text: 'First Name', dataField: 'firstname', width: 125 }, { text: 'Last Name', dataField: 'lastname', width: 125 }, { text: 'Product', dataField: 'productname', width: 200 } ] }); }); </script></head><body class='default'> <div id='jqxWidget'> <div id="grid1"></div> <br /> <br /> <div id="tree"> <ul> <li>Item 1</li> <li>Item 2 <ul> <li>Sub Item 2.1</li> <li>Sub Item 2.2</li> <li>Sub Item 2.3</li> </ul> </li> <li>Item 3</li> </ul> </div> </div></body></html>
Best Regards,
Peter StoevPeter, thank you for your help and assistance this has solved my problem!
one quick question, where can i find documentation on the “_syncItems” method you called?
gtrgrt
-
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.