Drag and Drop Between 2 Grids using CheckBox

[Sanith VarmaParticipant]

Hi,
I am trying to do Drag and Drop between two Grids. I have given selectionmode: ‘checkbox’ and my requirement is to delete data from parent grid when dropping data into child grid and vice versa. It’s working when i’m selecting only through check box but i want it to work even if i drag directly by clicking on the ‘row’. It is adding the row to child grid but not deleting row in parent grid by dragging the row directly.
Here is my code-

var sqGrid = jQuery.noConflict();
var isselected =null;

sqGrid(document).ready(function () {
var idsource = [];
var iddest = [];
var data = [
{ id: “1”, firstname: “Name 1”, lastname: “name 1”, productname: “a”},
{ id: “2”, firstname: “Name 2”, lastname: “name 2”, productname: “b”},
{ id: “3”, firstname: “Name 3”, lastname: “name 3”, productname: “c”},
{ id: “4”, firstname: “Name 4”, lastname: “name 4”, productname: “d”},
{ id: “5”, firstname: “Name 5”, lastname: “name 5”, productname: “e”},
{ id: “6”, firstname: “Name 6”, lastname: “name 6”, productname: “f”},
{ id: “7”, firstname: “Name 7”, lastname: “name 7”, productname: “g”},
{ id: “8”, firstname: “Name 8”, lastname: “name 8”, productname: “h”},
{ id: “9”, firstname: “Name 9”, lastname: “name 9”, productname: “i”},
{ id: “10”, firstname: “Name 10”, lastname: “name 10”, productname: “j”}
];

var source =
{
localdata: data,
datafields:
[
{ name: ‘id’, type: ‘long’},
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ }

],
datatype: “array”
};
var dataAdapter = new sqGrid.jqx.dataAdapter(source);
var columns = [

{ text: ‘First Name’, datafield: ‘firstname’, width: 250 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 250 },
{ text: ‘Product’, datafield: ‘productname’ }
];
// create data grids.

sqGrid(“#sourcegrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
selectionmode: ‘checkbox’,
theme: theme,
autoheight: true,
pageable: true,
altrows: true,
columns: columns,
rendered: function () {
var gridCells = sqGrid(‘#sourcegrid’).find(‘.jqx-grid-cell’);
// alert(gridCells);
gridCells.jqxDragDrop({
appendTo: ‘body’, theme: theme, dragZIndex: 500,
dropAction: ‘default’,
initFeedback: function (feedback) {
var rowsindexes = sqGrid(“#sourcegrid”).jqxGrid(‘getselectedrowindexes’);
//alert(“rowsindexes : ” + rowsindexes);
feedback.height(70);
feedback.width(220);
feedback.css(‘background’, ‘#aaa’);
}
});
gridCells.off(‘dragStart’);
gridCells.on(‘dragStart’, function (event) {
var value = sqGrid(this).text();
var position = sqGrid.jqx.position(event.args);
// alert(“position view :” + position);
var cell = sqGrid(“#sourcegrid”).jqxGrid(‘getcellatposition’, position.left, position.top);
// alert(“cell view :” + cell);
var rowsindexes = sqGrid(“#sourcegrid”).jqxGrid(‘getselectedrowindexes’);
var rows = [];
var clickedrow = cell.row;
isselected = false;
for (var i = 0; i < rowsindexes.length; i++) {
if (rowsindexes[i] == clickedrow) {
isselected = true;
}
rows[rows.length] = sqGrid(“#sourcegrid”).jqxGrid(‘getrowdata’, rowsindexes[i]);
idsource[i]= sqGrid(“#sourcegrid”).jqxGrid(‘getrowid’, rowsindexes[i]);
// idsource[i]=rows[i].id;
//alert(“rows id’s :” + rows[i].id);
// alert(“row id’s :” + idsource );

}
if (!isselected) {
sqGrid(“#sourcegrid”).jqxGrid(‘selectrow’, cell.row);
// alert(“Heheehe”+ sqGrid(“#sourcegrid”).jqxGrid(‘selectrow’, cell.row));
rows[rows.length] = sqGrid(“#sourcegrid”).jqxGrid(‘getrowdata’, cell.row);

}

if (rows.length > 0) {
var feedback = sqGrid(this).jqxDragDrop(‘feedback’);
if (feedback) {
feedback.height(rows.length * 25 + 25);
var table = ‘<table>’;
table += ‘<tr>’;
sqGrid.each(columns, function (index) {
table += ‘<td style=”width:’ + this.width + ‘px;”>’;
table += this.text;
table += ‘</td>’;
});
table += ‘</tr>’;
sqGrid.each(rows, function () {
table += ‘<tr>’;
table += ‘<td>’;
table += this.firstname;
table += ‘</td>’;
table += ‘<td>’;
table += this.lastname;
table += ‘</td>’;
table += ‘<td>’;
table += this.productname;
table += ‘</td>’;
table += ‘</tr>’;
});
table += ‘</table>’;
feedback.html(table);
}

sqGrid(this).jqxDragDrop({ data: rows })
}
});

gridCells.off(‘dragEnd’);
gridCells.on(‘dragEnd’, function (event) {
var value = sqGrid(this).jqxDragDrop(‘data’);

var position = sqGrid.jqx.position(event.args);
var pageX = position.left;
var pageY = position.top;

var sqGriddestination = sqGrid(“#destinationGrid”);
var targetX = sqGriddestination.offset().left;
var targetY = sqGriddestination.offset().top;
var width = sqGriddestination.width();
var height = sqGriddestination.height();
if (pageX >= targetX && pageX <= targetX + width) {
if (pageY >= targetY && pageY <= targetY + height) {
sqGriddestination.jqxGrid(‘addrow’, null, value);
deleterowsource(idsource);

}
}
});
}
});

sqGrid(“#destinationGrid”).jqxGrid(
{

width: 850,
autoheight: true,
theme: theme,
keyboardnavigation: false,
selectionmode: ‘checkbox’,
altrows: true,
pageable: true,
columns: columns,

rendered: function () {
var gridCells = sqGrid(‘#destinationGrid’).find(‘.jqx-grid-cell’);
gridCells.jqxDragDrop({
appendTo: ‘body’, theme: theme, dragZIndex: 500,
dropAction: ‘default’,
initFeedback: function (feedback) {
var rowsindexes = sqGrid(“#destinationGrid”).jqxGrid(‘getselectedrowindexes’);
feedback.height(70);
feedback.width(220);
feedback.css(‘background’, ‘#aaa’);
}
});

gridCells.off(‘dragStart’);
gridCells.on(‘dragStart’, function (event) {
var value = sqGrid(this).text();
// alert(“sqGrid(this).text() :” + sqGrid(this).text());
var position = sqGrid.jqx.position(event.args);
// alert(“position view :” + position);
var cell = sqGrid(“#destinationGrid”).jqxGrid(‘getcellatposition’, position.left, position.top);
// alert(“cell view :” + cell);
var rowsindexes = sqGrid(“#destinationGrid”).jqxGrid(‘getselectedrowindexes’);
// alert(“rowsindexes :” +rowsindexes );
var rows = [];
var clickedrow = cell.row;
// alert(“clicked row :” + clickedrow);
isselected = false;
for (var i = 0; i < rowsindexes.length; i++) {
if (rowsindexes[i] == clickedrow) {
isselected = true;
}
rows[rows.length] = sqGrid(“#destinationGrid”).jqxGrid(‘getrowdata’, rowsindexes[i]);
// alert(“rows selected :” + rows[rows.length]);
iddest[i] = sqGrid(“#destinationGrid”).jqxGrid(‘getrowid’, rowsindexes[i]);
/* iddest[i]=rows[i].id;
alert(“row id’s :” + iddest ); */
}
if (!isselected) {
sqGrid(“#destinationGrid”).jqxGrid(‘selectrow’, cell.row);
rows[rows.length] = sqGrid(“#destinationGrid”).jqxGrid(‘getrowdata’, cell.row);
}

if (rows.length > 0) {
var feedback = sqGrid(this).jqxDragDrop(‘feedback’);
// alert(“feedback :” + feedback);
if (feedback) {
feedback.height(rows.length * 25 + 25);
var table = ‘<table>’;
table += ‘<tr>’;
sqGrid.each(columns, function (index) {
table += ‘<td style=”width:’ + this.width + ‘px;”>’;
table += this.text;
table += ‘</td>’;
});
table += ‘</tr>’;
sqGrid.each(rows, function () {
table += ‘<tr>’;
table += ‘<td>’;
table += this.firstname;
table += ‘</td>’;
table += ‘<td>’;
table += this.lastname;
table += ‘</td>’;
table += ‘<td>’;
table += this.productname;
table += ‘</td>’;
table += ‘</tr>’;
});
table += ‘</table>’;
feedback.html(table);
}

sqGrid(this).jqxDragDrop({ data: rows })
}
});

gridCells.off(‘dragEnd’);
gridCells.on(‘dragEnd’, function (event) {
var value = sqGrid(this).jqxDragDrop(‘data’);
/* for(var i=0; i<value.length; i++){
alert(“value of :” + value[i].id);
} */
var position = sqGrid.jqx.position(event.args);
var pageX = position.left;
var pageY = position.top;

var sqGridsource = sqGrid(“#sourcegrid”);
var targetX = sqGridsource.offset().left;
var targetY = sqGridsource.offset().top;
var width = sqGridsource.width();
var height = sqGridsource.height();
if (pageX >= targetX && pageX <= targetX + width) {
if (pageY >= targetY && pageY <= targetY + height) {
sqGridsource.jqxGrid(‘addrow’, null, value);
deleterowdestination(iddest);

}
}
});
}
});
});

function deleterowsource(idsource){
// alert(“deleterow called id : ” + idsource);

for(var i=0; i<idsource.length; i++){
//alert(“idsource[i] values”+idsource[i]);
var commit= sqGrid(“#sourcegrid”).jqxGrid(‘deleterow’, idsource);

}
idsource.length=0;

sqGrid(‘#sourcegrid’).jqxGrid(‘clearselection’);
//alert(“id deletion :” + idsource);

//alert(“row deleted :” + commit);
}

function deleterowdestination(iddest){
// alert(“deleterow called id : ” + iddest);
for(var i=0; i<iddest.length; i++){
// alert(“iddest[i] values”+iddest[i]);
var commit= sqGrid(“#destinationGrid”).jqxGrid(‘deleterow’, iddest);

}
iddest.length=0;
sqGrid(‘#destinationGrid’).jqxGrid(‘clearselection’);
// alert(“id deletion :” + iddest);

//alert(“row deleted :” + commit);
}

Thanks and Regards
Varma

[HristoParticipant]

Hello Varma,

This is happening because there are no ids in the rowsindexes variable. And no items (ids) to delete.
You could try this approach:

if (!isselected)
{
	sqGrid("#sourcegrid").jqxGrid('selectrow', cell.row);
	// Just One row is dragged and for that reason "rows" & "idsource" will be with just one element
	rows[0] = sqGrid("#sourcegrid").jqxGrid('getrowdata', clickedrow);
	idsource[0] = sqGrid("#sourcegrid").jqxGrid('getrowid', clickedrow);
}

I hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Sanith VarmaParticipant]

Hello Hristo,

Thank you so much.. It’s working fine now.

Thanks & Regards,
Sanith Varma

[Author]

Posts