if i embedd the grid into the table, the grid turns into a unespecified format.I would like to know the cause of this problem and how to solve this problem. IF some could give me a hand, i would be thankful.
I suggest that you put the grid inside a DIV that is then placed inside the grid. You will have much better control over it then.
Show me an example of what you did and I'll show you where you made the mistake, because you can put a grid in a table using a DIV.
I send you the current code
many thanks!
<%@ taglib uri="
http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/tags/struts-html" prefix="HTML" %>
<html>
<head>
<link href="../runtime/styles/flat/grid.css" rel="stylesheet" type="text/css" ></link>
<link href="../general/style.css" rel="stylesheet" type="text/css" ></link>
<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;}
.active-scroll-data {left:0px; top: 0px}
.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
<script>
function inputFormAction(methodName){
document.forms[0].action = 'listInputForms.do?methodName='+methodName;
document.forms[0].method='POST';
document.forms[0].submit();
}
function startProposalAction(methodName){
document.forms[0].action = 'startProposal.do?methodName='+methodName;
document.forms[0].method='POST';
document.forms[0].submit();
}
function validate(form) {
var idNameIF = form.idNameIF.value; //document.getElementById("idNameIF");
var idPracticeIF = form.idPracticeIF.value; // document.getElementById("idPracticeIF");
var idSolutionIF = form.idSolutionIF.value; //document.getElementById("idSolutionIF");
var idStateIF = form.idStateIF.value; //document.getElementById("idStateIF");
var url = "examples/toto.ax?idNameIF=" + escape(idNameIF.value)+"&idPracticeIF="+ escape(idPracticeIF)+"&idSolutionIF="+escape(idSolutionIF)+"&idStateIF="+escape(idStateIF);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
res = req.responseText;
if(res){
createTable(res); // res = is a text with XML format, this I must put into the grid
}
}
}
}
</script>
<title>Untitled Document</title>
</head>
<body>
<HTML:form action="listInputForms.do" method="POST">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="titleGeneral">input forms for ${proposalType} (draft)</td>
</tr>
<tr>
<td class="formBorder"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="formulary">
<tr>
<td colspan="3"><img src="imgs/clear.gif" width="2" height="8"></td>
</tr>
<tr>
<td>
<div>
<script>
var table = new Active.XML.Table;
// provide data URL
table.setXML("");
// set columns
var columns = ["Practice", "Solution", "Company"];
// 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>
</div>
</td>
</tr>
<tr>
<td colspan="3"><img src="imgs/clear.gif" width="2" height="8"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="footBarLeft"> </td>
<td valign="top" class="footBar"></td>
<td class="footBarRight"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><HTML:button property="createProposal" value="Create Proposal" styleClass="buttonNew" onclick="startProposalAction('loadStartProposalPage');"/></td>
<td><HTML:button property="createInputForm" value="New Input Form" styleClass="buttonNew" onclick="inputFormAction('newInputForm');"/></td>
<td><HTML:button property="searchInputForms" value="Search" styleClass="buttonNew" onclick="validate();"/></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</HTML:form>
</body>
</html>
OK, I think I can help. First, the DIV that you are going to place the grid in, give it an ID. Something like <DIV id=gridDiv>. Then, move the code for creating the grid to the bottom of the page, right before the </body>. I have found that you will have too many problems trying to put a <SCRIPT> inside a DIV, it just doesn't work most of the time. So, now that you have given the DIV an ID and moved the script for creating the DIV to the bottom of the page, change the last line of the script from document.write(obj) to document.getElementById("gridDiv").innerHTML = obj.
This should do the trick.
I have tried all of this, and cannot get the grid in the html table to work. Here is my code:
<html>
<title>DABS - Exchange</title>
<style>
table {border-style:solid; border-color:#444488; border-width:1px; background-color: #CCDDFF;}
</style>
<link rel=stylesheet href=DABSstyle.css>
<head>
</head>
<body bgcolor=#ffffff>
<table width=60% align=left border=0 cellpadding=2 cellspacing=2 bgcolor=#CCDDFF>
<tr>
<td colspan=4 width=100% align='center'>
<div id=mygrid>
</div>
</td>
</tr>
</table>
<script language="javascript">
var myData = [
["text1", 123.45],
["text2", 678.90]
];
var obj = new Active.Controls.Grid;
obj.setColumnCount(2);
obj.setRowCount(2);
obj.setDataText(function(i,j){return myData[i][j]});
document.getElementById("mygrid").innerHTML = obj;
</script>
</body>
</html>