adding html on page with grid
this prolly is a very easy one, but how do I add html under a grid?
The <iframe> is not an option, since I would like to place links to action on the grid. Under the grid I would like to place a link that exports specific data from the grid to another script, this is not a problem, but adding the links to the page is, how pathetic :)
Hartlijn
December 19,
You can mix ActiveWidgets controls and normal HTML freely. You can even insert the grid into a table cell :-) just make sure you set the grid width and height explicitly (default is 100%).
Look at the file in the /examples directory:
/examples/grid/two grids on one page.htm
Alex
Alex (ActiveWidgets)
December 19,
There is no html table in this example: two grids on one page.htm.
Can you show me how I have to use grid in html table ?
I want this:
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Text1</td>
</tr>
<tr>
<td>Here I want grid</td>
</tr>
<tr>
<td>Text2</td>
</tr>
</table>
Thanks
MartinH
January 20,
Hi,
Maybe this would work
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Text1</td>
</tr>
<tr>
<td>
<div id="grid">
<script language="javascript">
create the active ui grid and then
document.getElementById("grid").innerHTML = <ActiveWidgets grid object>;
</script>
</div></td>
</tr>
<tr>
<td>Text2</td>
</tr>
</table>
Hope it helps
January 20,
Thanks. Good idea, but now I have problem that font is not displayed correctly and space between first form and grid is too big. Here is code:
<tr>
<td> <form action="" method="get" name="form1"><input name="txt1" type="text"></form></td>
</tr>
<tr>
<td> <div id="grid">
<script language="javascript">
var obj1 = new Active.Controls.Grid;
obj1.setId("grid1");
obj1.setRowCount(15);
obj1.setColumnCount(5);
obj1.setDataText(function(i, j){return data1[i][j]});
obj1.setColumnText(function(i){return columns1[i]});
obj1.setAttribute("tabIndex", 1);
document.getElementById("grid").innerHTML = obj1.toString();
</script>
</div></td>
</tr>
<tr>
<td> <form action="" method="get" name="form2"><input name="txt2" type="text"></form></td>
</tr>
MartinH
January 20,
I believe one can still use document.write(obj) inside TD element:
<tr>
<td>
<script language="javascript">
var obj1 = new Active.Controls.Grid;
obj1.setId("grid1");
obj1.setRowCount(15);
obj1.setColumnCount(5);
obj1.setDataText(function(i, j){return data1[i][j]});
obj1.setColumnText(function(i){return columns1[i]});
obj1.setAttribute("tabIndex", 1);
document.write(obj1);
</script>
</td>
</tr>
You just need to fix the size of the TABLE upfront. table-layout:fixed also helps.
Grid inherits the font from the parent element, so you either need to fix the font for the table or assign the font rules to the grid (.active-controls-grid or #grid1 selector)
Alex (ActiveWidgets)
January 20,
I'm sure this is really old and no one cares anymore, but I spent hours trying to figure out the same problem as it appears the person above has (grid-only pages work but the formatting on an inserted grid into other html doesn't). I finally found a post from someone saying that the DOCTYPE needs to be exactly this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
... and not this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
The latter being what Dreamweaver uses by default. When the latter is used, certain column and row formatting does not work and the second column (index 1) takes up 100% of the remaining column space (I also noticed that scroll bars never appeared). When former DOCTYPE is used, the grid formats as its told.
Hope this helps.
Wintermute
March 1,
First : Congratulation for this really good control !
Well, i use this DOCTYPE in all my page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And the grid is well displayed.
But when i use <td> or <div> tag with this DOCTYPE, the first column of the grid take all grid width and nothing is align.
When i remove the DOCTYPE all seems well.
But i need this DOCTYPE to display the rest of css in my html page...
When can i do ?
Sorry for my bad english, hope you will undestand me.
SgtKabukinan
April 7,
This version of the grid works only in quirks mode (not strict/standards-compliant). If you really need strict DOCTYPE - the only solution I can suggest is putting grid in iframe.
Alex (ActiveWidgets)
April 7,
all right ! thx you.
I will try to do something else. Maybe i can join both.
April 15,