Blogs

This post shows how to setup a one way drag and drop from a Grid to a Form. The user will be able to drag a Grid record and fill a Form by dropping the record over it. 1. Include the JavaScript and CSS files. The Form will be displayed in a jqxExpander(jqxexpander.js) widget. As we are going to implement Drag and Drop of elements, we need to include the jqxdragdrop.js file, too.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.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>

2. Add the HTML structure. The Form element will be with 3 input fields – First Name, Last Name and Product.

<div id='jqxWidget'>
	<div style="float: left;" id="grid">
	</div>
	<div style="margin-left: 50px; float: left;" id="form">
		<div>
			Form Panel
		</div>
		<div>
			<form>
			<table>
				<tr>
					<td>
						First Name:
					</td>
					<td>
						<input id="firstName" />
					</td>
				</tr>
				<tr>
					<td>
						Last Name:
					</td>
					<td>
						<input id="lastName" input />
					</td>
				</tr>
				<tr>
					<td>
						Product:
					</td>
					<td>
						<input id="product" />
					</td>
				</tr>
			</table>
			</form>
		</div>
	</div>
</div>

3. Populate the Grid with sample data. We’ll create a very simple Grid with 10 records. After the Grid’s initialization, select the ‘form’ DIV tag and create the jqxExpander.

var source =
{
	localdata: generatedata(10),
	datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create data grids.
$("#grid").jqxGrid(
{
	width: 400,
	source: dataAdapter,
	theme: theme,
	autoheight: true,
	columns: [
	  { text: 'First Name', dataField: 'firstname', width: 100 },
	  { text: 'Last Name', dataField: 'lastname', width: 100 },
	  { text: 'Product', dataField: 'productname' }
	]
});
$("#form").jqxExpander();

4. Select all Grid cells and initialize the jqxDragDrop plug-in. By doing that, all Grid cells will be draggable.

// 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) {
		feedback.height(25);
		feedback.width($("#grid").width());
	}
});

5. Get the selected record when the user starts a drag operation. In order to do that, we bind all cells to the ‘dragStart’ event. Then we get the dragged row and save it.

// initialize the dragged object.
gridCells.bind('dragStart', function (event) {
	var value = $(this).text();
	var cell = $("#grid").jqxGrid('getcellatposition', event.args.pageX, event.args.pageY);
	$(this).jqxDragDrop('data', $("#grid").jqxGrid('getrowdata', cell.row));
	// update feedback's display value.
	var feedback = $(this).jqxDragDrop('feedback');
	feedback.html($(this).parent().html());
});

6. Fill the Form when the user drops the dragged record over the Form. We do this in the ‘dragEnd’ handler.

 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) {
				$("#firstName").val(value.firstname);
				$("#lastName").val(value.lastname);
				$("#product").val(value.productname);
			}
		}
	});

In the image below, the user is dragging a Grid row. The image below illustrates the result of dropping the dragged row over the Form.