[slonatejonesMember]

I too am having an issue with drag/drop not working using a JSON datatype. As soon as I change the data source to an array, it works. Is there something that needs to be different with JSON datatype?

Here is my code:

var myAssignSource = {
datatype: “json”,
datafields: [
{ name: “Id”, type: ‘string’ },
{ name: “Changer”, type: ‘string’ },
{ name: “Action”, type: ‘string’ },
{ name: “OldValue”, type: ‘string’ },
{ name: “NewValue”, type: ‘string’ }
],
url: “http:///Home/FetchMyAssignments”
};

var dataAdapter = new $.jqx.dataAdapter(myAssignSource);

var columns = [
{ text: ‘Project #’, datafield: ‘Id’ },
{ text: ‘Account Officer’, datafield: ‘Changer’ },
{ text: ‘Street Address’, datafield: ‘Action’ },
{ text: ‘County’, datafield: ‘OldValue’ },
{ text: “Active”, datafield: “NewValue” }
];

// create data grids.
$(“#grid”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
theme: theme,
selectionmode: ‘singlerow’,
sortable: true,
pageable: true,
altrows: true,
autoheight: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
filterable: true,
columns: columns
});

// trigger the columnreordered event.
$(“#grid”).on(‘columnreordered’, function (event) {
var column = event.args.columntext;
var newindex = event.args.newindex
var oldindex = event.args.oldindex;
});

// 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) {
var rowsindexes = $(“#grid”).jqxGrid(‘getselectedrowindexes’);
feedback.height(25);
feedback.width($(“#grid”).width());
feedback.css(‘background’, ‘#aaa’);
}
});
// initialize the dragged object.
gridCells.on(‘dragStart’, function (event) {
var value = $(this).text();
var cell = $(“#grid”).jqxGrid(‘getcellatposition’, event.args.pageX, event.args.pageY);
var rowsindexes = $(“#grid”).jqxGrid(‘getselectedrowindexes’);

var rows = [];
var clickedrow = cell.row;
var isselected = false;
for (var i = 0; i 0) {
// update feedback’s display value.
var feedback = $(this).jqxDragDrop(‘feedback’);
if (feedback) {
feedback.height(rows.length * 25 + 25);
var table = ”;
table += ”;
$.each(columns, function (index) {
table += ‘‘;
table += this.text;
table += ‘‘;
});
table += ”;
$.each(rows, function () {
table += ”;
table += ”;
table += this.Id;
table += ”;
table += ”;
table += this.Changer;
table += ”;
table += ”;
table += this.Action;
table += ”;
table += ”;
table += this.OldValue;
table += ”;
table += ”;
table += this.NewValue;
table += ”;
table += ”;
});
table += ”;
feedback.html(table);
}
// set the dragged records as data
$(this).jqxDragDrop({ data: rows })
}
});
gridCells.on(‘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 element with rows if the user dropped the dragged items over it.
if (pageX >= targetX && pageX = targetY && pageY < = targetY + height) {
if (value != null) {
var table = "”;
table += “”;
for (var i = 0; i < columns.length; i++) {
table += "”;
table += columns[i].text;
table += “”;
}
table += “”;
for (var i = 0; i < value.length; i++) {
table += "”;
table += “”;
table += value[i].Id;
table += “”;
table += “”;
table += value[i].Changer;
table += “”;
table += “”;
table += value[i].Action;
table += “”;
table += “”;
table += value[i].OldValue;
table += “”;
table += “”;
table += value[i].NewValue;
table += “”;
table += “”;
}
table += “”;
$(“#dropPanel”).html(table);
}
}
}
});

[Author]

Posts