Loading grid with user Inputs?

Hello,

I have looked through this forum and I was not able to find an answer nor the question. I am kind of new to Javascript.

1) Can I hide the grid on page load? I do not want to populate the grid until until some events have occured.

2) why is the script in the body of the html?
why isn't this script in the head section?

I tried putting this script in a function and have this function trigger when a user clicks a button but, it did not work.
I received garbage unformatted data? why?

<script>

// create ActiveWidgets data model - XML-based table
var table = new Active.XML.Table;

// provide data URL
table.setURL("../data/companies-simple.xml");

// start asyncronous data retrieval
table.request();

// define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];

// 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
obj.setDataModel(table);

// write grid html to the page
document.write(obj);

</script>
=========================
output:
Loading data, please wait...
company...

please help

Jason

August 31,

1) Yes, don't issue the document.write() statement. This is what 'draws' the grid to the screen.
2) This is so you know where the grid will show up in the flow of the document. It is perfectly acceptable to have SCRIPT in the body of a page.

If you have unformatted data make sure that you are loading the CSS file, this is vital. The grid will not display without the CSS file. Also, if you have the above script in a function, and you do a document.write(), how do you control where it goes on the page? I suggest that you create a DIV to conatin the grid then do a document.getElementById(theDIV).innerHTML = yourGrid; this will put the grid into the DIV and you can easily control where the DIV is on the page ahead of time.

Jim Hunter

August 31,

Hunter,
I have done what you said Hunter before I posted and it did not work (and still doesn't work).
I have included the simple sample code below. I want the grid to show only after the user clicks the 'TestNow' button.
Clicking on the 'TestNow' button produces badly formatted garbage.
The funny thing is...when I view the source code of page that comes up after user click event..the source file, css files..all are missing?
I don't understand why...I did include them in the original page.

Here is the sample code...please let me know if you spot something I am missing...

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


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

function test()
{

// create ActiveWidgets data model - XML-based table
var table = new Active.XML.Table;

// provide data URL
table.setURL("../data/companies-simple.xml");

// start asyncronous data retrieval
table.request();

// define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];

// 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
obj.setDataModel(table);

var odiv=document.getElementById('divid');
odiv.innerHTML=document.write(obj);

// write grid html to the page
//document.write(obj);
}

</script>

<style>
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {width: 80px;}
.active-column-1 {width: 200px; background-color: threedlightshadow;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head>
<body>

<input type="button" value='Testnow' onclick=test()>
<div id="divid"></div>

</body>
</html>

Jason

September 1,

ok i realized what was wrong:

=>odiv.innerHTML=obj

i guess this mistake is from my lack of experience with javascript?
thx anyhow for responding Hunter. I appriciate it.

Jason

September 1,

This topic is archived.

Loading grid with user Inputs?

See also:

Search

New Data Grid

Version 2