:: Forum >> Version 2 >>

how do I dynamically insert a grid into a div

More information on this topic is available in the documentation section: /general.intro/.

I have a button on my page that when clicked, I want to cause a grid to be placed in a div. So, the code is this:
<div id="groceryStoreItemsDetail">Content for "groceryStoreItemsDetail" Goes Here</div>

<input name="Submit" type="submit" onclick="openDetailGrid(&quot;groceryStoreItemsDetail&quot;)" value="Detail" /></td>

and the following javascript function:
function openDetailGrid(sDivName) {
var myCells = [
["MSFT","Microsoft Corporation", "314,571.156"],
["ORCL", "Oracle Corporation", "62,615.266"]
];

var myHeaders = ["Ticker", "Company Name", "Market Cap."];

// create grid object
var obj = new AW.UI.Grid;

// assign cells and headers text
obj.setCellText(myCells);
obj.setHeaderText(myHeaders);

// set number of columns/rows
obj.setColumnCount(3);
obj.setRowCount(2);

// write grid to the page
document.getElementById(sDivName).innerHtml = obj.innerHtml;
//document.write(obj);
}

So, what I thought would happen is that the innerHtml of the div object would be replaced by the innerHtml of the grid object. But, nothing happens at all. No errors, but the contents of the div object does not change. What am I doing wrong?
Thanks.
Andy
Friday, June 15, 2007
I realized that innerHtml should have been innerHTML (upper case). But after making that change, I get this text in the div:

function(){try{if(this._innerHTML){return this._innerHTML}this._innerParamLength=0;var i,j,name,value,param1,param2,html,item,s="";var content=this._content.split(" ");for(i=1;i=0;j--){param1=getParamStr(j);param2=getParamStr(this._innerParamLength+j);if(param1 !=param2){html=html.replace(param1,param2)}this[param2]=item[param1]}this._innerParamLength+=item._outerParamLength;s+=html}else{s+=value}}this._innerHTML=s;return s}catch(error){this.handle(error)}}

How can I actually get the grid to appear.
Thanks.
Andy
Friday, June 15, 2007
The correct syntax is

document.getElementById(sDivName).innerHtml = obj;

which is equivalent to

document.getElementById(sDivName).innerHtml = obj.toString();

- the grid and other AW classes generate the html using toString() method which is called automatically when you use the object in a string context.

Alex (ActiveWidgets)
Friday, June 15, 2007
Hello,
While i run this code it just diplay the below information in text not displayed in the grid format.
What is the problem?
TickerCompany NameMarket Cap.MSFTMicrosoft Corporation314,571.156ORCLOracle Corporation62,615.266
deepthi
Tuesday, June 19, 2007
Hi Deepthi,

I have tried your example with some tweaks as I had the same requirement of updating the div tag with grids.

Please find the working code below.


-------------------------------------------------------------------<HTML>
<head>
<title>ActiveWidgets Examples</title>
<style>body {font: 13px Tahoma}</style>

<!-- include links to the script and stylesheet files -->
<!-- replace "../../runtime" with the actual path to the ActiveWidgets runtime directory on your webserver -->
<!-- if you get ['AW' is undefined] error - check path to the aw.js file -->

<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>

</head>
<BODY>

<Table>
<TR>
<TD>
<div id="groceryStoreItemsDetail">Content for "groceryStoreItemsDetail" Goes Here</div>


<input name="Submit" type="submit" onclick="openDetailGrid(&quot;groceryStoreItemsDetail&quot;)" value="Detail"

/></td>
</TR></TABLE>

<BR>
and the following javascript function:
<BR>

<script>

var mode=1;
function openDetailGrid(sDivName) {



if(mode==1)
{
alert("calling getData1 function");
var myCells = getData1();
mode+=1;

}
else
{

alert("calling getData2 function");
var myCells = getData2();
mode=1;
}

var myHeaders = ["Ticker", "Company Name", "Market Cap."];

// create grid object
var obj = new AW.UI.Grid;

// assign cells and headers text
obj.setCellText(myCells);
obj.setHeaderText(myHeaders);

// set number of columns/rows
obj.setColumnCount(3);
obj.setRowCount(2);

// write grid to the page
document.getElementById(sDivName).innerHTML = obj;

//document.write(obj);
}

//first function returning array1
function getData1()
{
var myCells = [
["MSFT","Microsoft Corporation", "314,571.156"],
["ORCL", "Oracle Corporation", "62,615.266"]
];

return myCells;

}

//second function returning array2
function getData2()
{
var myCells = [
["Irshad Khan","Sigma IT Consultants", "050-4875125"],
["Shehal Bhushan Patil", "SIGMA IT Consultants", "050-4512454"]
];

return myCells;

}
</script>

</BODY>

</html>
<! -- --Code Ends here-- -->

Thanks for your question which inturn helped me find my answers.

San
Monday, August 13, 2007



This topic is archived.

Back to /general.intro/

Documentation:

Forum search