jQWidgets Forums
Forum Replies Created
-
Author
-
May 14, 2015 at 10:08 am in reply to: drag and drop doesnt work after adding new row drag and drop doesnt work after adding new row #71115
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. -
AuthorPosts