Few Lines of Code – Nested Grid issue

[KeshavanParticipant]

Hi Dimitar,

as required by you, please fine below few lines of relevant code for the issue, pleas suggest solution.
Thanks,
Keshavan

Nested Grid – DRag/Drop implementation details.
Outer grid name – orderheaderGrid
Inner grid name – grid
Name of the Other Grid (seperate from Nested Grid) – orderdetailGrid.
Nested Grid is properly implemented and is working OK. orderdetail grid is seperately working OK.

Issue only in Drag-Drop.
———————–—————
I have Implemented Drag-Drop from the above mentioned Other Grid(orderdetailGrid) in to inner grid (name of Grid – grid) of nested Grid.
With below drag-drop implementation , i am referenncing “cell” in dragend as in the below line,

cell = $(“#grid”).jqxGrid(‘getcellatposition’, position.left, position.top);

Browser Console displayed – Invalid selctor – check Id or Css.

when i checked the Id programatically, in Nested Grid, The Inner grid (name of Grid : grid) the Id was grid0, grid1, grid2, …. gridn depending
on the row of the outer grid of nested grid.

so i used, var grid = “grid” + referencerow; in dragend code (pasted below).
cell = $(“#grid”).jqxGrid(‘getcellatposition’, position.left, position.top);

referencerow is a global variable.

// nested grid rowclick binding
$(“#grid”).on(“rowclick”, function (event) {
var args = event.args;
var rowindex = args.rowindex;
referencerow = rowindex;
});

Now , browser console shows NO error but Drop doesn’t happen, the target row remains blank.

Now , browser console shows NO error but Drop doesn’t happen, the target row remains blank.

$(“#orderdetailGrid”).jqxGrid(
 {
 width: 945,
 height: 400,
 source: dataAdapter,
 theme: ‘ui-sunny’,
sortable: true,
 groupable: true,
 columnsresize: true,
 columnsreorder: true,
 keyboardnavigation: false,
 filterable: true,
 sortable: true,
 enabletooltips: true,
 rendered: function (type) {
 // select all grid cells.
 var gridCells = $(‘#orderdetailGrid’).find(‘.jqx-grid-cell’);
 // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
 gridCells.jqxDragDrop({
 appendTo: ‘body’, theme: “ui-sunny”, dragZIndex: 99999,
 dropAction: ‘none’,
initFeedback: function (feedback) {
 feedback.height(25);
 },
 onTargetDrop: function (a, b, c, d, e) {

},
 dropTarget: $(‘#grid0′), 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 = $(“#orderdetailGrid”).jqxGrid(‘getcellatposition’, position.left, position.top); // original line
 refdata = 0; // ADDED 30 jan 2014
 refdata = $(‘#orderdetailGrid’).jqxGrid(‘getcellvalue’, cell.row, “OrderDetailId”); // ADDED 30 jan 2014
 $(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) {
 oldvalue = 0;
 var idx = 0;
 var valueDesc = $(this).text();
 var position = $.jqx.position(event.args);
 var cell;
 var grid = “grid” + referencerow;
 cell = $(“#grid”).jqxGrid(‘getcellatposition’, position.left, position.top);
 Rcell = cell;
 if (valueDesc != null) {
 // idx = getItemIndex(valueDesc + refdata); // ADDED refdata on 30 Jan 2014
 idx = 1;
 if (idx != -1) {
 if (cell != null) {
 var vd2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, ” ProductDesc”);
var aq2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “OrderQty”);
var pq2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “PendingShipQty”);
var sid = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “ShipId”);
var oid = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “OrderId”);
if ((vd2 == null) && (aq2 != 0 || pq2 != 0) && (orefid == oid)) { // changed both from /
 //addded oid==gid
 cartItems.push(valueDesc);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “ProductDesc”, valueDesc);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “ProductCode”, pc);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “OrderQty”, stockqty);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “PendingShipQty”, psquantity);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “OrderDetailId”, odid);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “StockQty”, invqty);
 cartItems.push(valueDesc + refdata);// ADDED refdata on 30 Jan 2014
 var sri = 0;
 valueDesc = ” “; // added today
 }
 else {
 alert(“Drop properly on a empty row / add new row / check OrderId, Drag and drop item on it !!!”);
 }
 }
 }
else {
 var sq2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “OrderQty”);
oldvalue = sq2;
 alert(“Item already exists !!! “);
 }
 }
 })
My HTML is as below,

<body class=’default’>
 <div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
 <div id=”orderheaderGrid”></div>
 <div id=”grid”></div>
 <div id=”orderdetailGrid” style=”margin-left: 1px; margin-top: 7px;”></div>
 </div>
 </body>

[DimitarParticipant]

Duplicate post: http://www.jqwidgets.com/community/topic/design-flaw-not-possible-to-implement-nested-grid-with-drag-drop/#post-73136.

[Author]

Posts