One way drag and drop from a Grid to a Form

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 style="margin-left: 50px; float: left;" id="form">
Form Panel
First Name:
<input id="firstName" />
Last Name:
<input id="lastName" input />
<input id="product" />
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.
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' }
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) {
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');
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) {
In the image below, the user is dragging a Grid row. begin-drag The image below illustrates the result of dropping the dragged row over the Form. end-grid-drag

About admin

This entry was posted in JavaScript UI Widgets, JavaScript Widgets, jqxGrid and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply