drag and drop doesnt work after adding new row

[RahulParticipant]

Hi,

I am new to jqxgrid.
I have two grids grid 1 and grid 2. Grid 1 is nested grid and grid 2 normal grid from where data can be drag and drop into grid 1’s nested grid or subgrid. At first i m trying to add a new row at the top in grid 1, which creates a blank row and a blank nested grid. after that i m triyng to get data (the row not a cell)from the grid 2 by drag and drop into nested grid of grid 1. Here drag and drop is not working and giving me error for
var targetX = $form.offset().left;
var targetY = $form.offset().top;
Both this values are undefined and cannot be dropped.

N.B.:Sorry for my bad english.

Rahul

[ivailoParticipant]

Hi Rahul,

From your explanations and throwed error, i suspect that you are using for basis this demo. So you’re trying to drop probably the cell values into not existing form, and that gives you an erros with undefinded values.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[RahulParticipant]

Hi Ivailo,
The DEMo you linked,my code is somewhat similar to that but using nested grid…..i m dropping row values in the nested grid not in a normal grid.
This is my code:
<link rel=”stylesheet” href=”/javascript/jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”/javascript/jqwidgets/scripts/jquery-1.11.1.min.js””></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxtreegrid.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxdropdownbutton.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxdragdrop.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/scripts/demos.js”></script>
<script type=”text/javascript” src=”/javascript/jqwidgets/generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“#add”).click(function(){
var datarow = {};
var commit = $(“#grid1”).jqxGrid(‘addrow’, null, datarow);
// $(“#grid1”).jqxGrid(‘refresh’);
var rows = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
alert(rows);
$(“#count”).text(rows + ” Boards”);
// $(“#grid1”).jqxGrid(‘updatebounddata’, ‘addrow’);
//$(“#expand”).click();
//$(“#grid1”).jqxGrid(‘hiderowdetails’, rows-1);
});

$(“#remove”).click(function(){
var selectedrowindex = $(“#grid1”).jqxGrid(‘getselectedrowindex’);
//alert(selectedrowindex);
var rowscount = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#grid1”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#grid1”).jqxGrid(‘deleterow’, id);
$(“#expand”).click();
}
var rows = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
$(“#count”).text(rows + ” Boards”);
});

$(“#expand”).click(function(){
var count = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
for (var m = 0; m < count; m++) {
$(“#grid1”).jqxGrid(‘showrowdetails’, m);
}
});

$(“#collapse”).click(function(){
var count = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
for (var m = 0; m < count; m++) {
$(“#grid1”).jqxGrid(‘hiderowdetails’, m);
}
});

var url = “<%=Encoder.encodeForJavaScript(State.getLocaleContextPath(request))%>/javascript/jqwidgets/sampledata/employees.xml”;
var source1 =
{
datafields: [
{ name: ‘FirstName’ },
{ name: ‘LastName’ },
{ name: ‘Title’ },
{ name: ‘Address’ },
{ name: ‘City’ }
],
root: “Employees”,
record: “Employee”,
id: ‘EmployeeID’,
datatype: “xml”,
async: false,
url: url,
sortcolumn: ‘FirstName’,
sortdirection: ‘asc’
};

var employeesAdapter = new $.jqx.dataAdapter(source1);

var orderdetailsurl = “<%=Encoder.encodeForJavaScript(State.getLocaleContextPath(request))%>/javascript/jqwidgets/sampledata/orderdetails.xml”;

var ordersSource =
{
datafields: [
{ name: ‘EmployeeID’, type: ‘string’ },
{ name: ‘ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, type: ‘string’ }//,
//{ name: ‘ShippedDate’, type: ‘date’ }
],
root: “Orders”,
record: “Order”,
datatype: “xml”,
url: orderdetailsurl,
async: false
};

var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
orders = ordersDataAdapter.records;
//alert(orders);
var nestedGrids = new Array();

// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
/* alert(“Index : “+index);
alert(“Parent : “+parentElement.FirstName);
alert(“Grid : “+gridElement);
alert(“Record : “+record.FirstName); */
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
//alert(orders.length);
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“EmployeeID”]);
//alert(orders[m]);
if (result)
ordersbyid.push(orders[m]);
}

var orderssource = { datafields: [
{ name: ‘EmployeeID’, type: ‘string’ },
{ name: ‘ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, type: ‘string’ }//,
//{ name: ‘ShippedDate’, type: ‘date’ }
],
id: ‘OrderID’,
localdata: ordersbyid
}
var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);

if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter, width: 575, height: 200,
sortable: true,
columns: [
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
{ text: ‘Ship Address’, datafield: ‘ShipAddress’, width: 200 },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 150 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 150 }//,
//{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 250 }
]
});
}
}
var renderer = function (row, column, value) {
return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
}

// creage jqxgrid
$(“#grid1”).jqxGrid(
{
width: 650,
height: 625,
source: source1,
rowdetails: true,
columnsresize: true,
sortable: true,
filterable: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’subgrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
ready: function () {
var count = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
//alert(count);
for (var m = 0; m < count; m++) {
$(“#grid1”).jqxGrid(‘showrowdetails’, m);
}
},
columns: [
//{ text: ‘Photo’, width: 50, cellsrenderer: photorenderer },
{ text: ‘First Name’, datafield: ‘FirstName’, width: 100, editable: true, cellsrenderer: renderer },
{ text: ‘Last Name’, datafield: ‘LastName’, width: 100, editable: false,cellsrenderer: renderer },
{ text: ‘Title’, datafield: ‘Title’, width: 180, editable: false,cellsrenderer: renderer },
{ text: ‘Address’, datafield: ‘Address’, width: 300, editable: false,cellsrenderer: renderer },
{ text: ‘City’, datafield: ‘City’, width: 170, editable: false,cellsrenderer: renderer }
]
});
var source2 =
{
localdata: generateshippingdata(20),
datafields: [
{ name: ‘ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, type: ‘string’ }
],
datatype: “array”
};
var dataAdapter2 = new $.jqx.dataAdapter(source2);
var columns2 = [
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
{ text: ‘Ship Address’, datafield: ‘ShipAddress’, width: 200 },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 130 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 120 }
];

$(“#grid2”).on(‘rowclick’, function () {
// put the focus back to the Grid. Otherwise, the focus goes to the drag feedback element.
$(“#grid2”).jqxGrid(‘focus’);
});

// create data grids.
$(“#grid2”).jqxGrid(
{
width: 650,
source: dataAdapter2,
autoheight: true,
pageable: true,
//editable: true,
columnsresize: true,
sortable: true,
filterable: true,
//selectionmode: ‘multiplerowsadvanced’,
columns: columns2,
rendered: function () {
// select all grid cells.
var gridCells = $(‘#grid2’).find(‘.jqx-grid-cell’);
if ($(‘#grid2’).jqxGrid(‘groups’).length > 0) {
gridCells = $(‘#grid2’).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(90);
feedback.width(250);
}
});

var rows = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
$(“#count”).text(rows + ” Boards”);

// initialize the dragged object.
gridCells.off(‘dragStart’);
gridCells.on(‘dragStart’, function (event) {
var value = $(this).text();
var position = $.jqx.position(event.args);
var cell = $(“#grid2”).jqxGrid(‘getcellatposition’, position.left, position.top);
//alert(“Cell : “+cell);
$(this).jqxDragDrop(‘data’, $(“#grid2”).jqxGrid(‘getrowdata’, cell.row));
var groupslength = $(‘#grid2’).jqxGrid(‘groups’).length;
//alert(“Group length : “+groupslength);
// update feedback’s display value.
var feedback = $(this).jqxDragDrop(‘feedback’);
//alert(“Feedback : “+feedback);
var feedbackContent = $(this).parent().clone();
var table = ‘<table>’;
$.each(feedbackContent.children(), function (index) {
if (index < groupslength)
return true;
table += ‘<tr>’;
table += ‘<td>’;
table += columns2[index – groupslength].text + ‘: ‘;
table += ‘</td>’;
table += ‘<td>’;
table += $(this).text();
table += ‘</td>’;
table += ‘</tr>’;
});
table += ‘</table>’;
feedback.html(table);
});
gridCells.off(‘dragEnd’);
// set the new cell value when the dragged cell is dropped over the second Grid.
gridCells.on(‘dragEnd’, function (event) {

var count = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
var value = $(this).jqxDragDrop(‘data’);
//alert(count);
for (var m = 0; m < count; m++) {
var position = $.jqx.position(event.args);
var pageX = position.left;
var pageY = position.top;

var $targetGrid = $(“#subgrid” + m);
var targetX = $targetGrid.offset().left;
var targetY = $targetGrid.offset().top;
var width = $targetGrid.width();
var height = $targetGrid.height();
//alert(“Page X : ” + pageX +”\nPage Y : ” + pageY +”\nTarget X : ” + targetX +”\nTarget Y : ” + targetY + “\nWidth : ” + width +”\nHeight : ” +height);

// fill the grid if the user dropped the dragged item over it.
if (pageX >= targetX && pageX <= targetX + width) {
if (pageY >= targetY && pageY <= targetY + height) {
//alert(“Start”);
var datarow = {};
datarow[“ShipName”] = value.ShipName;
datarow[“ShipAddress”] = value.ShipAddress;
datarow[“ShipCity”] = value.ShipCity;
datarow[“ShipCountry”] = value.ShipCountry;
//alert(“Step”);
var commit = $(“#subgrid”+m).jqxGrid(‘addrow’, null, datarow);
//alert(“Done”);
var selectedrowindex = $(“#grid2”).jqxGrid(‘getselectedrowindex’);
//alert(selectedrowindex);
var rowscount = $(“#grid2”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#grid2”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#grid2”).jqxGrid(‘deleterow’, id);
}
break;
}
}
}
});
}
});
var source3 =
{
localdata: generateattendantsdata(20),
datafields: [
//{ name: ‘EmployeeID’, type: ‘string’ },
{ name: ‘Pool’, type: ‘string’ },
{ name: ‘Schedule’, type: ‘string’ },
{ name: ‘Role’, type: ‘string’ },
{ name: ‘Board’, type: ‘string’ },
{ name: ‘Id’, type: ‘string’},
{ name: ‘Name’, type: ‘string’ }//,
//{ name: ‘ShippedDate’, type: ‘date’ }
],
datatype: “array”
};
var dataAdapter3 = new $.jqx.dataAdapter(source3);
var columns3 = [
//{ text: ‘Off’, columntype: ‘button’, width: 40 },
{ text: ‘Pool’, datafield: ‘Pool’, width: 50 },
{ text: ‘Schedule’, datafield: ‘Schedule’, width: 60 },
{ text: ‘Board’, datafield: ‘Board’, width: 100 },
{ text: ‘Role’, datafield: ‘Role’, width: 50 },
{ text: ‘Id’, datafield: ‘Id’, width: 100 },
{ text: ‘Name’, datafield: ‘Name’, width: 250 }//,
// { text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 250 }
];

$(“#grid3”).on(‘rowclick’, function () {
// put the focus back to the Grid. Otherwise, the focus goes to the drag feedback element.
$(“#grid3”).jqxGrid(‘focus’);
});

// create data grids.
$(“#grid3”).jqxGrid(
{
width: 650,
source: dataAdapter3,
autoheight: true,
//selectionmode: ‘checkbox’,
pageable: true,
selectionmode: ‘singlecell’,
columnsresize: true,
sortable: true,
filterable: true,
//selectionmode: ‘multiplecellsextended’,
columns: columns3,
rendered: function () {
// select all grid cells.
var gridCells = $(‘#grid3’).find(‘.jqx-grid-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(25);
},
dropTarget: $(‘#grid1’), 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();
//alert(value);
var position = $.jqx.position(event.args);
// alert(position);
var cell = $(“#grid3”).jqxGrid(‘getcellatposition’, position.left, position.top);
//alert(cell);
$(this).jqxDragDrop(‘data’, {
value: value
// alert(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);
var cell = $(“#grid1”).jqxGrid(‘getcellatposition’, position.left, position.top);
if (cell != null) {
$(“#grid1″).jqxGrid(‘setcellvalue’, cell.row, cell.column, value);
}
});
}
});
});
</script>
<body class=’default’>
<div id=’jqxWidget’ style=”margin-top: 20px;”>
<div style=”margin-left: 20px; float: left; width: 650px;”>
<div>
<div style=”float: left;”>
<input type=”button” id=”add” value=”Add” style=”width: 100px;”/>
</div>
<div style=”margin-left: 10px; float: left;”>
<input type=”button” id=”remove” value=”Remove” style=”width: 100px;”/>
</div>
<div style=”margin-left: 20px; float: left;” id=”count”></div>
<div style=”float: right;”>
<input type=”button” id=”expand” value=”+” style=”width: 20px;”/>
</div>
<div style=”margin-right: 2px; float: right;”>
<input type=”button” id=”collapse” value=”-” style=”width: 20px;”/>
</div>
</div>
<div style=”margin-top: 20px;” id=”grid1″></div>
</div>
<div style=”margin-left: 20px; float: left; width: 650px;”>
<div id=”jqxdropdownbutton” style=”position: relative; margin-right: 3px; margin-top: 5px; float:right;”>
<div style=”position: relative; margin-right: 3px; margin-top: 5px; float:right;” id=”grid4″>
</div>
</div>
<div id=”grid3″></div>
<div style=”margin-top: 20px;” id=”grid2″></div>
</div>
</div>
</body>
———————————————————————-
after clicking ADD button, a new row adds to grid 1. then i m unable to drag and drop from grid 2.
Problem occurs in nested grid row addition.

[ivailoParticipant]

Hi Rahul,

When i tried to test your code, i’ve found an undefined function generateshippingdata() that throws an error.
If you’re changed another files, and this function is related to them, please send a fiddle with all related files for better analyze.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts