Update Drag/Drop Grid(s) via javascript

[rrogulski]

We are attempting to use JavaScript to update the grid 'ondrop' as opposed to returning to the server each time. We have accomplished this one time in the screen but on the second attempt, viewing the data within the grids still has the original data. The grids are using bound fields loaded from RPG. Extra subfile records are added to each grid to ensure there is enough space to drop from one grid to the other.

This is what the grids look like when the screen is loaded.

Orignial Grid.jpg (57.83 KiB) Viewed 2505 times

During 'ondrop' we are moving data from one to the other with successful display.

First Move.jpg (60.22 KiB) Viewed 2505 times

Although the grids are displaying correctly, when attempting to drag/drop again, the JavaScript is seeing the grid data as if it hadn't changed from the original. This code is in the 'ondrop' for both grids as we want to be able to move them back and forth.

Code: Select all

var source = getObj(pui.dragDropInfo["dd element id"]);
var target = getObj(pui.dragDropInfo["target element id"]);
var sourceRRN = pui.dragDropInfo["dd record number"];
var targetRRN = pui.dragDropInfo["target record number"];

var sourceCnt = source.grid.getRecordCount();
var targetCnt = target.grid.getRecordCount();

var i1=0;
// Load source arrays
var sourceDesc = [];
var sourceItem = [];
for (i1=1; i1<=sourceCnt; i1++) {
	sourceDesc[i1] = source.grid.getDataValue(i1, "scDesc");
	sourceItem[i1] = source.grid.getDataValue(i1, "scItem");
}
// Load target arrays
var targetDesc = [];
var targetItem = [];
for (i1=1; i1<=targetCnt; i1++) {
	targetDesc[i1] = target.grid.getDataValue(i1, "scDesc");
	targetItem[i1] = target.grid.getDataValue(i1, "scItem");
}
// Add record to target arrays
targetRRN += 1;
targetDesc.splice(targetRRN, 0, sourceDesc[sourceRRN]);
targetItem.splice(targetRRN, 0, sourceItem[sourceRRN]);
// Remove record from source arrays

sourceDesc.splice(sourceRRN, 1);
sourceItem.splice(sourceRRN, 1);
// Update target grid
for (i1=1; i1<=targetCnt+1; i1++) {
  target.grid.setDataValue(i1, "scDesc", targetDesc[i1]);
  target.grid.setDataValue(i1, "scItem", targetItem[i1]);
}
// Update source grid
if (source !== target) {
	for (i1=1; i1<=sourceCnt; i1++) {
		if (sourceDesc[i1] === undefined) {
			sourceDesc[i1] = "";
			sourceItem[i1] = "";
		}
		source.grid.setDataValue(i1, "scDesc", sourceDesc[i1]);
		source.grid.setDataValue(i1, "scItem", sourceItem[i1]);
	}
}

source.grid.render();
source.grid.refresh();
target.grid.render();
target.grid.refresh();

pui.dragDropInfo.cancel = true;

[matt.denninghoff]

I haven't setup a grid and program exactly the same as yours, but have you tried using the browser's debugger to step through each line and inspect the objects as you manipulate the grids?

Since you are using the same code in both grids, you could put the code into a custom javascript file inside a function. For example,

Code: Select all

function mygridondrop(){
//... your code here.
}

You could place that in /profoundui/userdata/custom/js/griddrop.js, then set the ondrop property to:

Code: Select all

mygridondrop();

Then you can set a debug breakpoint inside that function and inspect what's happening.

Note, grid.render and grid.refresh don't seem to be needed here: you aren't using a db-driven grid, and you aren't changing column properties.

[rrogulski]

I have used debug which is how I determined that 'grid.getDataValue' is seeing the data prior to any changes.

I am aware of using the function method but its *** the way our office is setup to get that done and difficult to make changes.

The 'render' and 'refresh' were added to try and come up with a solution to the problem.

[Scott Klement]

Can you post a JSON dump so that we can try it? To get a JSON dump, press Ctrl-F9 while the display is active, and it will download a dump of that screen to a file named json.txt. Use the "Attachments" feature of the forums to post it here.

[Scott Klement]

Here's a quick example of what (I think) you're trying to do. To try it out:

1) Upload the RPG member (DDROPR) to a source member on your IBM i. FTP in ASCII mode works for this, or copy/paste into RDi.
2) Open the DSPF member in the Visual Designer using Open/Local File.
3) Use "Save As" in the Visual Designer to save to a source member.
4) Compile the display.
5) Compile the RPG

There are a few things that I want to bring to your attention:

a) The setDataValue() API cannot be used to add new rows or delete rows from a grid. This is one of the problems I see in your code... You use splice() to add or remove rows from the array, then you spin through the array and try to make the grid match. My code expects there to be empty rows at the end of the array, and when it inserts a new row, it will remove an empty row to keep the array size the same. If there are no empty rows, it won't let you drag anything into the grid.

b) To view the JavaScript routines that I wrote, look at the "onload" property of the main record format. I define the routines there, and then call them from the ondrop event of the grids.

c) The fields are textboxes, but I used CSS classes to make them look like output fields. This is done because output fields are never submitted back to the RPG program, since they're output only. However, because they're textboxes, they are tricky to drag, you have to grab them in just the right spot with the mouse... this example might be nicer if I put an image in the subfile row to provide an icon to drag... but I'll leave that up to you.

d) I used the PUISAMPLES/PRODP file that we provide with the Profound UI samples library for the database. If you don't have the Profound UI samples installed, you'll need to change the code to use a different file.

e) There have been a number of bugs in setDataValue(), so please be sure that you have the latest Profound UI updates installed.

[rrogulski]

This has been working until we realized that it doesn't when the user changes the sort (and/or filters/finds) of grid. It looks like the RRN retrieved via the dragDropInfo is the RRN of the original position of the grid but the getAllDataValues load the array with the elements in the order currently on the screen. The dragDropInfo RRN has no real way to match up to the array element. When loading the array back to the grid via updateAllRows, it seems that the rowNum used on setDataValue is still related to the original (non-filtered) grid. Is there a way to determine the RRN order of a filtered grid?

[Scott Klement]

Can you call getDataValue() in a loop instead of getAllDataValues?

[rrogulski]

What we ended up having to do keep track of the original grid RRN within the grid itself. We hid a field to hold the RRN and then used it to work with.