Dynamic data in DDGrid

[notesdev]

Greetings!

I am working in IBM/Lotus Domino and I'm trying to use the DDGrids from Jack Slocum's Blog >> Drag and drop with the Grid - Part 2. I've got it working as shown on the blog, however, I'm having a couple of issues with changes and I would appreciate any help offered:

1. I put the contents of ddgrid-examples.js on the form so I could work with it more easily and I've removed all references to the second column in ddgrid1. The grid comes up just fine without any values or header, but the comumn itself is still there.



//Notice that the second set of values
//destined for the second column are removed
var dm = new YAHOO.ext.grid.DefaultDataModel([
['yahoo.js'],
['dom.js'],
['event.js'],
['dragdrop.js'],
['connection.js'],
['yui-ext-core.js'],
['tabs-lib.js'],
['splitbar-lib.js']
]);

//The following correctly sets the new header of the first column
//The second column now has no header text, but it still exists
var cm = new YAHOO.ext.grid.DefaultColumnModel([
{header: 'Presidents', width: 125}
]);




2. We currently use two multi-value SELECT elements side-by-side with left and right arrow buttons and we want to replace them with Example 2 from the blog, but so far I can't even populate Example 1 correctly. Also, once I do populate them, I'm still going to have to get the values back out during submit.

I have a multi-value SELECT element that is populated via backend code and the idea is to hide the div it resides in if the user can see the ddgrid and pull it's values into the grid. I wrote a small javascript function to get those values and replace the list of hard-coded values used in the example. I've tried passing it as a string and as an array and the best I've been able to come up with is using and array, but only the first value makes it into the ddgrid. I've tried adding the single-quotes, the brackets, every combination I can think of, but nothing works correctly.

The following is how I've tried to populate the array using every variation:


var elements1 = new Array();

...
var dm = new YAHOO.ext.grid.DefaultDataModel([ elements1 ]);
...

function getSelectElements(){
var example1 = document.getElementById("Example_1");
//Failed attempt at using a string
/* if (example1) {
for (var i = 0; i < example1.length; i++) {
if (i==0) {
elements1 += "[\'" + example1.options[i].text + "\']";
} else {
elements1 += ",\n[\'" + example1.options[i].text + "\']";
}
}
}*/
//failed attempt using an array...
if (example1) {
for (var i = 0; i < example1.length; i++) {
elements1[i] = example1.options[i].text;
// elements1[i] = "[" + example1.options[i].text + "]";
// elements1[i] = "['" + example1.options[i].text + "']";
// elements1[i] = "[\'" + example1.options[i].text + "\']";
}
}
//It all looks fine in the alert below, but at best only populates the first value...
alert(elements1);
YAHOO.util.Event.on(window, 'load', DDExample1.init, DDExample1, true);
YAHOO.util.Event.on(window, 'load', DDExample2.init, DDExample2, true);
}




Any assistance is greatly appreciated! BTW, I LOVE the resizable textareas! They are particularly helpful in crowded forms.