how do I dynamically insert a grid into a div

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("groceryStoreItemsDetail")" 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.

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.

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.

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

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>





<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("groceryStoreItemsDetail")" 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.

Forum search