How to embedd the grid into a html table?

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.

Ariel

July 6,

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.

Jim Hunter

July 7,

Thanks for your response but the tag DIV doesnt work, do you have any example?

Ariel

July 7,

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.

Jim Hunter

July 7,

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>

<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>

Ariel

July 7,

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.

Jim Hunter

July 8,

Thanks a lot Jim, this works wonderfull!

Ariel

July 8,

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">
         // data source
         var myData = [
            ["text1", 123.45],
            ["text2", 678.90]
         ];

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

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

         // link to cell text
         obj.setDataText(function(i,j){return myData[i][j]});

         // write control to the page
         //document.write(obj);
         document.getElementById("mygrid").innerHTML = obj;
      </script>

   </body>
</html>

Beth

September 30,

You just need to reference grid files like:
<link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>

and give some height to the table like:
<table width=60% height=50% align=left border=0 cellpadding=2 cellspacing=2 bgcolor=#CCDDFF>

September 30,

Hi

I Want to put a Grid in a JSP. this Grid have to sort ASC or DESC, depend the column.

I have the rows in a ArrayList.

How can I get a Grid that sort ASC or DESC, depending the column ??

I think I have to draw the rows with JavaScript code, but how ??

Alexander

October 3,

This topic is archived.

How to embedd the grid into a html table?

See also:

Search

New Data Grid

Version 2