:: Forum >> Version 1 >>

please check my script

hi folks
this is my page.
i dont know how to make it work.
can someone give me a full page to use?

with respect from marion
===================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
var obj = new Active.Controls.Grid;
obj.setProperty("column/count", 5);
obj.setProperty("row/count", 5);
obj.setProperty("data/text", "some text");
document.write(obj);


var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"]
];

var obj = new Active.Controls.Grid;

obj.setProperty("column/count", 5);
obj.setProperty("row/count", 5);
obj.setProperty("data/text", function(i,j){return myData[i][j]});

document.write(obj);



</body>
</html>

marion
Sunday, February 20, 2005
You need to put your javascript inside <script> tags
Paul Barry
Sunday, February 20, 2005
hi paul
thanks for your reply
i love the look of this grid.
but hell how do i get it to work?
what does
"you need to put your javascript inside <script> tags" mean?


with respect from marion
marion
Sunday, February 20, 2005
try to read the example page http://www.activewidgets.com/grid/ you have to include javascript code in <head> and put your code in <script> taga
oh man
Sunday, February 20, 2005
opaul and man:

wherewith are my brains?????????

they were out in the vegetable garden with the chooks [australian terminology for chickens]

i have now inkled out some steps to take, with a little help from alex via an email response from a desperate marionjoe:"Download the distribution package and look in the directory /examples/grid - you will find several examples which are easier to start with."

i was roused to action from a stupor brang about by being on this wickedwidgetgrid since 6am this morning fanging around till now 11.51pm...
so ...
1 had a look in the examples/ and hoiked one out. i realised 4 hours later i was meant to look in the grid where i fond an index.html. ............. ah, this is something i can relate to ... an index file ... that means i am supposed to upload it somewhere ... so that means i am probably meant to upload some files onto a website ... ahhhhhhhhhhhhhhhhh ... why the hell couldn't there be a getting started file somewhere saying all that??????????///

with respect from marion,
i'll keep you posted
when do you all go to bed?
i will need some more help probba bubbly.
marion
Sunday, February 20, 2005
....

There _is_ a startup file "saying all that"

You need to learn to take the information you're reading and process it in a manner so you understand what the language (be it Javascript or english) is trying to tell you.
Monday, February 21, 2005
dear ...

thanks for the reply.

do you know where the startup file is ....

with respect from marion
marion
Monday, February 21, 2005
hi folks
could you check my latest code
thankyou again


http://www.organicparents.org/wp/widgetgrid/grid/index.htm

<html>
<head>
<title>ActiveWidgets Grid :: dhtml grid, javascript tables, .net datagrid, asp controls, php widgets</title>
<meta content="ActiveWidgets is a cross-browser client-side web GUI framework" name="description" />
<link href="../common/site.css" type="text/css" rel="stylesheet" />
<script src="../common/site.js"></script>
</head>
<body class="single">
<script>document.write(window.$header)</script>
<div class="image-home">
</div>
<div class="location">:: Home &gt;&gt; Examples &gt;&gt;
</div>
<h2>Grid widget example
</h2>
<p>
Here is step-by-step guide on how to include the grid widget on your page. Let's look
first at the end result:
</p>
<iframe src="../examples/grid/basic.htm" frameborder="0" width="525" height="250">
</iframe>
<h2>Include ActiveWidgets files
</h2>
<p>
The first step is to include a reference to the ActiveWidgets files into the &lt;head&gt;
section of your page. You need to include two files: a javascript library file and
a stylesheet file. The compressed files are located in the /runtime directory. Here
is how it looks:
</p>
<xmp>
<link href="../runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" />
<script src="../runtime/lib/grid.js"></script>
</xmp>
<h2>Create widget
</h2>
<p>
To insert a full-featured grid into the page we would need to generate a large number
of HTML tags and merge them with our data. All that will be done by the ActiveWidgets grid
object. We just need to put a &lt;script&gt; block at the desired position; create <kbd>new</kbd> Active.Controls.Grid
object and write this object back to the page using <kbd>document.write()</kbd> function.
</p>
<xmp> <script>
var obj = new Active.Controls.Grid;
document.write(obj);
</script>
</xmp>
<h2>How it works
</h2>
<p>
The last line in the script above is in fact equivalent to calling <kbd>toString()</kbd> method
of the grid object. Each ActiveWidgets object implements <kbd>toString()</kbd> method to
produce the HTML markup, i.e. visual representation of the object inside HTML document.
The HTML tags produced by the grid <kbd>toString()</kbd> method and written to the
page by <kbd>document.write()</kbd> may look like this:
</p>
<xmp style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 180px">
<div id="grid" class="active-controls-grid " oncontextmenu="return false" onselectstart="return false">
<div id="grid.layout/data" class="active-scroll-data ">
<div id="grid.data.item:0" class="active-templates-row active-list-item " onclick="dispatch(event, this)">
<div id="grid.data.item:0.item:0" class="active-templates-text active-list-item active-column-0 active-row-cell " onclick="dispatch(event, this)">
MSFT
</div>
<div id="grid.data.item:0.item:1" class="active-templates-text active-list-item active-column-1 active-row-cell " onclick="dispatch(event, this)">
Microsoft Corporation
</div>
<div id="grid.data.item:0.item:2" class="active-templates-text active-list-item active-column-2 active-row-cell " onclick="dispatch(event, this)">
314,571.156
</div>
<div id="grid.data.item:0.item:3" class="active-templates-text active-list-item active-column-3 active-row-cell " onclick="dispatch(event, this)">
32,187.000
</div>
<div id="grid.data.item:0.item:4" class="active-templates-text active-list-item active-column-4 active-row-cell " onclick="dispatch(event, this)">
55000
</div>
</div>
<div id="grid.data.item:1" class="active-templates-row active-list-item " onclick="dispatch(event, this)">
<div id="grid.data.item:1.item:0" class="active-templates-text active-list-item active-column-0 active-row-cell " onclick="dispatch(event, this)">
ORCL
</div>
<div id="grid.data.item:1.item:1" class="active-templates-text active-list-item active-column-1 active-row-cell " onclick="dispatch(event, this)">
Oracle Corporation
</div>
<div id="grid.data.item:1.item:2" class="active-templates-text active-list-item active-column-2 active-row-cell " onclick="dispatch(event, this)">
62,615.266
</div>
<div id="grid.data.item:1.item:3" class="active-templates-text active-list-item active-column-3 active-row-cell " onclick="dispatch(event, this)">
9,519.000
</div>
<div id="grid.data.item:1.item:4" class="active-templates-text active-list-item active-column-4 active-row-cell " onclick="dispatch(event, this)">
40650
</div>
</div>
...
</div>
</div>
</xmp>
<h2>Data binding
</h2>
<p>
In this first simple example we'll take the data for our grid from the two-dimensional
javascript array.
</p>
<xmp><script>
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
...
];
</script>
</xmp>
<p>
As a minimum we should supply a number of rows/columns and a function providing the
data text for a given cell.
</p>
<xmp><script>
obj.setRowCount(20);
obj.setColumnCount(5);
obj.setDataText(function(i, j){return myData[i][j]});
</script>
</xmp>
<p>
You are not limited just to javascript arrays - the same approach could be used for
XML web services and other data sources.
</p>
<h2>Formatting
</h2>
<p>
Let's start with column headings. Again, we just need to supply a function, which
will provide heading text for each column.
</p>
<xmp><script>
var myColumns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
obj.setColumnText(function(i){return myColumns[i]});
</script>
</xmp>
<p>
Then we can change the width and the appearance of each column using the standard
CSS attributes.
</p>
<xmp><style>
.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;}
</style>
</xmp>
<h2>User actions
</h2>
<p>
The grid object translates DHTML keyboard and mouse events to higher level 'actions',
like 'deleteRow' instead of 'keydown' + 'del' key. The action call provides action
source as an argument. In the example below we are sending the cell text to the browser
status bar:
</p>
<xmp><script>
obj.setAction("click", function(src){window.status = src.getProperty("item/text")});
</script>
</xmp>
<h2>Page source
</h2>
<p>
The actual HTML source of the grid example looks like this:
</p>
<xmp style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 320px">
<html>
<head>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="../runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" />
<script src="../runtime/lib/grid.js"></script>
<!-- grid format -->
<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;}
</style>
<!-- grid data -->
<script>
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];

var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<script>

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// set number of rows/columns
obj.setRowCount(20);
obj.setColumnCount(5);

// provide cells and headers text
obj.setDataText(function(i, j){return myData[i][j]});
obj.setColumnText(function(i){return myColumns[i]});

// set click action handler
obj.setAction("click", function(src){window.status = src.getProperty("item/text")});

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

</script>
</body>
</html>
</xmp>
<h2><a name="download">Download</a>
</h2>
<ul>
<li>
<a href="http://sourceforge.net/project/showfiles.php?group_id=90231" target="_blank">Grid
widget source files from SourceForge</a>
</li>
</ul>
<h2>Another example
</h2>
<p>
One more example - using images and tooltips:
</p>
<iframe src="../examples/grid/images.htm" frameborder="0" width="525" height="150">
</iframe>
<script>document.write(window.$footer)</script>
</body>
</html>
marion
Monday, February 21, 2005
I suggest you hire someone to do it for you
Monday, February 21, 2005
Hi Paul

I have tried this link http://www.organicparents.org/wp/widgetgrid/grid/index.htm

But still there is a problem, I already have a table now i want to embed this code with my table to make the widgets active i.e to change the column width.

Could you please give me some tips

With Regards
Vivek
Vivek
Tuesday, February 22, 2005



This topic is archived.

Back to support forum

Forum search