set drag&drop to grid after populating it

[elessarParticipant]

hello,
this example is my desired behavior http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/dragdropgridrecordtoform.htm
But I initialize the grid empty and (when user searches stg) I populate it. Afterwards I want to allow user drag&drop on rows. My problem is that when I set
gridCells.jqxDragDrop({ appendTo: 'body', theme: theme, dragZIndex: 99999,
dropAction: 'none',
initFeedback: function (feedback) {
feedback.height(70);
feedback.width(220);
}
});
The gridCells is empty and nothing is set to be draggable.The initialization of grid is following:

////SEARCH grid
var dataS = {};

var sourceS =
{
localdata: dataS,
datatype: "local",
datafields:
[
{ name: 'select', type: 'boolean' },
{ name: 'location', type: 'string' },
{ name: 'feedTitle', type: 'string' },
{ name: 'feedID', type: 'string' }
],
};

$("#searchGrid").jqxGrid(
{
width: 345,
height:150,
source: sourceS,
theme: theme,
editable: true,
filterable: true,
sortable: true,
columnsresize: true,

},
autoshowfiltericon: true,
columns: [
{ text: '', datafield: 'select', editable: true, columntype: 'checkbox', width: 30},
{ text: 'Location', datafield: 'location', width: 80 },
{ text: 'Feed title', datafield: 'feedTitle', width: 130 },
{ text: 'Feed ID', datafield: 'feedID', width: 80, },
],
groupable:true,
groups:['location'],
groupindentwidth: 7,
showgroupsheader:false
});


afterwards user can repeatably search something and the grid populates. Do you have any suggestion how to do this?

[Peter StoevKeymaster]

Hi elessar,

The Grid has an event called ‘bindingcomplete’ It is raised when the binding is changed so you can initialize the DragDrop inside the event handler of the “bindingcomplete” event.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[elessarParticipant]

Thank you for your answer, this event works really good, but it still didn’t help me, after :

$("#searchGrid").bind("bindingcomplete", function (event) {
   var gridCells = $('#searchGrid').find('.jqx-grid-cell');
});

the gridCells are still empty. Maybe because of populating the grid? I feel that this isn’t the right way. but works good
$(“#searchGrid”).jqxGrid({ source: gridSource }); // being called, when gridSource is ready

[elessarParticipant]

can’t find the edit button, so excuse new post, but I found the problem. The thing is, that rows in my grid are grouped. When I set groupable to false, then I can drag & drop.. Is there any workaround?

[Peter StoevKeymaster]

Hi elessar,

When grouping is enabled, the cells CSS class is jqx-grid-group-cell.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[elessarParticipant]

Thank you

[max1974Member]

I have the same problem I can populate the table but then no longer possible to use the drag and drop ….
what solution?

$(document).ready(function () {
var theme = getDemoTheme();
var source =
{
url: ‘prova.asp’,
datatype: “json”,
cache: false,
datafields: [
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
var columns = [
{ text: ‘First Name’, dataField: ‘firstname’, width: 100 },
{ text: ‘Last Name’, dataField: ‘lastname’, width: 100 },
{ text: ‘Product’, dataField: ‘productname’ }
];

// create data grids.
$(“#grid”).jqxGrid(
{
width: 400,
source: dataAdapter,
theme: theme,
autoheight: true,
columns: columns
});

// 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(70);
feedback.width(220);
}
});

// initialize the dragged object.
gridCells.on(‘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’);
var feedbackContent = $(this).parent().clone();
var table = ”;

$.each(feedbackContent.children(), function (index) {
table += ”;
table += ”;
table += columns[index].text + ‘: ‘;
table += ”;
table += ”;
table += $(this).text();
table += ”;
table += ”;
});

table += ”;
feedback.html(table);
});

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 form if the user dropped the dragged item over it.
if (pageX >= targetX && pageX = targetY && pageY < = targetY + height) {
$("#firstName").val(value.firstname);
$("#lastName").val(value.lastname);
$("#product").val(value.productname);
}
}
});

$("#form").jqxExpander({ width: 250, theme: theme });
});

[Peter StoevKeymaster]

Hi max1974,

You may take a look at the DragDrop sample: dragdrop.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[max1974Member]

thanks for the reply
your example
I changed this part, but I have no data on the screen because.
var source =
{
url: ‘prova.asp’,
datatype: “json”,
datafields: [
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ }
]
};
/* var source =
{
localdata: generatedata(100),
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ }
],
datatype: “array”
};*/

my answer file :
{“id”:”1″,”firstname”:”gigi”,”lastname”:”pippo”,”productname”:”prova”}

[max1974Member]

So what is a bug
I did not understand if “elessat” solved

[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);
}
}
}
});

[Peter StoevKeymaster]

Hi slonatejones,

The reason is that the Grid’s data in your scenario is from a remote source. The solution is to catch the “bindingcomplete” event of jqxGrid and implement the Drag and Drop in the event handler. You can subscribe to the “bindingcomplete” event before calling the jqxGrid constructor.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts