jQuery UI Widgets Forums Grid Incorrect drop target when dragging rows from one grid to another

This topic contains 2 replies, has 2 voices, and was last updated by  DM 9 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • DM
    Participant

    Hi,

    (jqWidgets v3.8.2)

    I have a slight problem when dragging rows from one grid to another. I have 2 grids, separated by a horizontal splitter & I’m dragging rows from the top grid to the bottom. The problem is that the onDropTarget callback is being called when the dragged row is not in the target grid. I’ve setup a sample to demonstrate. If you run the sample watching the console messages, you can pick up row 1 from the top grid and drag to the bottom grid. There’s an “Entering” message added to the console when you enter the lower grid and if you drop, there’s the “dropping” message in the console which is fine. However, if you pick up row 4, don’t drag to the target but drop on row 5 instead (still in the upper grid), you get the “Dropping” message even though it’s not in the drop target. It only seems to affect the rows at the bottom of the first grid. i.e. dragging row 1 onto row 2 doesn’t call the onDropTarget callback. Basically, onDropTargetEnter seems to be evaluating the target correctly, but onDropTarget doesn’t.

    Sample:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    	<meta name="description" content="This page demonstrates splitter's events" />
    	<title id='Description'>Horizontal Splitter </title>
    	<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="../../scripts/demos.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/jqxcheckbox.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/jqxgrid.js"></script>
    	<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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.edit.js"></script>
    	<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    	<script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function () {
    			var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
    
    			// prepare the data
    			var source1 =
                {
                	datatype: "json",
                	datafields: [
                        { name: 'CompanyName', type: 'string' },
                        { name: 'ContactName', type: 'string' },
                        { name: 'ContactTitle', type: 'string' },
                        { name: 'Address', type: 'string' },
                        { name: 'City', type: 'string' },
                        { name: 'Country', type: 'string' }
                	],
                	localdata: data
                };
    			var source2 =
                {
                	datatype: "json",
                	datafields: [
                        { name: 'CompanyName', type: 'string' },
                        { name: 'ContactName', type: 'string' },
                        { name: 'ContactTitle', type: 'string' },
                        { name: 'Address', type: 'string' },
                        { name: 'City', type: 'string' },
                        { name: 'Country', type: 'string' }
                	],
                	localdata: data
                };
    
    			var dataAdapter1 = new $.jqx.dataAdapter(source1);
    			var dataAdapter2 = new $.jqx.dataAdapter(source2);
    
    			$('#mainSplitter').jqxSplitter({ width: 850, height: 400, orientation: 'horizontal', panels: [{ size: 200 }, { size: 200 }] });
    			$('#grid1').jqxGrid({
    				width: '100%',
    				height: '100%',
    				source: dataAdapter1,
    				pageable: true,
    				altrows: true,
    				selectionmode: 'multiplecellsadvanced',
    				columns: [
    					{ text: 'Company Name', datafield: 'CompanyName', width: 250 },
    					{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
    					{ text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
    					{ text: 'City', datafield: 'City', width: 120 },
    					{ text: 'Country', datafield: 'Country' }
    				],
    				rendered: function() {
    					var grid = this;
    					var gridRows = $(grid.element).find('div[role="row"]');
    					gridRows.jqxDragDrop({
    						appendTo: 'body',
    						dragZIndex: 99999,
    						dropAction: 'none',
    						dropTarget: '#grid2',
    						onDragStart: function() {
    						},
    						onTargetDrop: function() {
    							console.log("Dropping");
    						},
    						onDropTargetEnter: function() {
    							console.log("Entering");
    						},
    						initFeedback: function(feedback) {
    							var v = $(feedback).find('div:visible:first');
    							$(feedback).empty();
    							feedback.append(v);
    						}
    					});
    				}
    			});
    
    			$('#grid2').jqxGrid({
    				width: '100%',
    				height: '100%',
    				source: dataAdapter2,
    				pageable: true,
    				altrows: true,
    				columns: [
                        { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                        { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                        { text: 'City', datafield: 'City', width: 120 },
                        { text: 'Country', datafield: 'Country'}
    				]
    			});
    		});
    	</script>
    </head>
    <body class='default'>
    	<div id='jqxWidget'>
    		<div id="mainSplitter">
    			<div>
    				<div id="grid1"></div>
    			</div>
    			<div>
    				<div id="grid2"></div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    

    Thanks,


    ivailo
    Participant

    Hi alanfaux,

    Here is our drag/drop demo with grid.
    It will be helpful for you.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    DM
    Participant

    Ok. I was trying to get it to drag the whole row rather than single cells but I can restrict it to the first cells of the rows and that seems to work. Thanks.

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

You must be logged in to reply to this topic.