:: Forum >>

Updating Grid using IFRAME

From a main page, I want to add, update or delete the contents of the GRID that I have referenced in an iframe. It appears to be that I lose the object ('this.girdData' is null or not an object) from the page called in the iframe.

<td colspan="4" align="left" nowrap bgcolor="#C9D3DE">
<iframe src="epli/basic.htm" id="Schedules4i" name="Schedules4i"
frameborder="0" width="100%" height="100"></iframe>
<td colspan="4" nowrap>
<input id="btnAddUpdate" type="button"
value="Add" style="width: 120px;" />
<input id="btnDelete" type="button"
value="Delete Selected Row(s)" disabled="disabled" />
<input id="btnClearAll" type="button"
value="Clear All" style="width: 120px;" />

Here is the page that contains the GRID.

<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

<!-- ActiveWidgets stylesheet and scripts -->
<link rel="stylesheet" type="text/css" href="../../../runtime/styles/classic/grid.css">
<script src="../../../runtime/lib/grid.js"></script>

<!-- grid format -->
.active-controls-grid {height: 100%; font: menu;}
.active-column-0 {width: 150px;}
.active-column-1 {width: 100px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
// create data formats
var string1 = new Active.Formats.String;
var number1 = new Active.Formats.Number;
var date1 = new Active.Formats.Date;
var number2 = new Active.Formats.Number;
// define formatting rule for text output
date1.setTextFormat("mm dd yyyy");
// create ActiveWidgets data model - XML-based table
var table = new Active.XML.Table;
// provide data URL
// define namespace for selecting column data
table.setNamespace("co", "http://tempuri.org/");
// set column XPath
table.setColumns(["co:nature-of-business", "co:number-of-employees", "co:retroactive-date", "co:employees-cov-by-plan"]);
// set column formatting
table.setFormats([string1, number1, date1, number2]);
// start asyncronous data retrieval
// define column labels
var columns = ["Nature of Business", "Number of Employees", "Retroactive Date", "Employees covered by plan"];
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// provide column labels
obj.setColumnProperty("texts", columns);
// provide external model as a grid data source
// write grid html to the page
// enable multiple selection
// obj.setProperty("selection/multiple", true);

// write grid html to the page

obj.resetRowValues = function() {
// re-initialize the grid data model
this.setDataProperty("count", this.gridData.length);
this.setRowProperty("value", function(i){return i});
this.setRowProperty("order", function(i){return i});
this.setSortProperty("index", null);
this.setSelectionProperty("index", -1);
this.setSelectionProperty("values", []);

obj.showRow = function() {
var selectionIndex = this.getProperty("selection/index");
if(selectionIndex >= 0) {
parent.document.frmSchedules4.btnAddUpdate.value = " Update ";
parent.document.frmSchedules4.btnDelete.disabled = false;
parent.document.frmSchedules4.textfield0.value = this.getDataProperty("text", selectionIndex, 0);
parent.document.frmSchedules4.textfield1.value = this.getDataProperty("text", selectionIndex, 1);
parent.document.frmSchedules4.textfield2.value = this.getDataProperty("text", selectionIndex, 2);
parent.document.frmSchedules4.textfield3.value = this.getDataProperty("text", selectionIndex, 3);
obj.setAction("selectionChanged", obj.showRow);

obj.addOrUpdateRow = function() {
var selectionIndex = this.getProperty("selection/index");
var aRecord = [ parent.document.frmSchedules4.textfield0.value,
parent.document.frmSchedules4.textfield3.value ];
if(selectionIndex >= 0) {
alert("selectionIndex =" + selectionIndex);
alert("aRecord =" + aRecord);
this.gridData.splice(selectionIndex, 1, aRecord);
} else {

obj.deleteRow = function() {
var selectionValues = this.getProperty("selection/values");
if(selectionValues.length > 0) {
for(var i = selectionValues.length -1; i >= 0 ; --i) {
this.gridData.splice(selectionValues[i], 1);

obj.clearAll = function() {
// clear form
parent.document.frmSchedules4.btnAddUpdate.value = " Add ";
parent.document.frmSchedules4.btnDelete.disabled = true;

Monday, September 20, 2004
you need to call it as parent.gridObjectName for it to work from an iFrame
Tuesday, September 21, 2004
Could you give me an example. I tried a few things, but they're not working.
Wednesday, September 22, 2004
It seems that referense to this.gridData was copied from the code based on js array data model. In you case (XML data model) you have to modify row functions.
Alex (ActiveWidgets)
Saturday, September 25, 2004

drop that in your url bar - hit enter - right here on this page - dont run away to do it :)

I use that all the time for what you will see it does

Now there is a reason why I threw out what looks like an unrelated example. If you stop and think, and realize that obviously that javascript is running on this here page - its obvious that you just dynamically added content to this page - which you could use for Alex's little toy here with no problem.

Though you would probably want something more like
var timeurl = new Date()
var timeurl2=timeurl.getTime()
var head = document.getElementsByTagName('head').item(0)
var scriptTag = document.getElementById('loadScript');
script = document.createElement('script');
script.src = "http://domain.com/path/to/probably/a/php/asp/whatever/file/that/prints/out/the/javascript/you/need/to/update/the/grid.php?game="+game+"&cnt="+cnt+"&"+timeurl2;
script.type = 'text/javascript';
script.id = 'loadScript';

(the only thing you need to change in that above is the url, in the file it pulls in, you have to have some sort of action, be it to fire a function on the page already, or has the action in the file - it works both moz and ie - I have no clue about opera, nor will I ever care about opera until they support invisible iframes :))
Monday, September 27, 2004
oh - change anything and everything in the url - but leave the timeurl2 variable and what makes it so you dont catch
Monday, September 27, 2004

This topic is archived.

Back to support forum

Forum search