How to use dynamic HTML String in ActiveWidget Grid?

Hi All,
I have one String contains HTML info like "<table><tr><column headers><tr><tr><td>column details</td></tr><tr><td>column details</td></tr>....</table>". The HTML String is dynamically generated in one javabean used in jsp page. Is there any way to use this String as input to Grid? the 'column headers' should shown as Grid headers and 'column details' should shown as Grid data.
Any suggestions or code snippets helps a lot. Thanks in advance.

Vijaya Gannoju

December 29,

It looks like your HTML is actually a table. You really, and I emphasize really don't want to do it that way. Mostly because you will only be able to insert the entire table into one cell of the grid. The grid does not know what is a row from your HTML. A better way would be to return XML from your servlet. The only way to do it how you are saying, is when you get your HTML returned from your servlet, use javascript DOM parser to iterate through the nodes and create the grid from that in the various ways.

Tony

December 29,

Hi All,
Can we use dhtml table property to get table row .
Like
<table id="gridTableId">
<tr><td>td1</td><td>td2</td></tr>
<tr><td>td1</td><td>td2</td></tr>
<tr><td>td1</td><td>td2</td></tr>
......
</table>

/*********************************
******use dhtml table property*********
*********************************
<script language="javascript">
var tab=window.gridTableId;
alert(tab.rows.length);
for(var i=0;i<tab.rows.length;i++){
alert(tab.rows[i].children.innerText);
alert(tab.rows[i].cells[2].innerText);
}
</script>

If use the method to initialized the AW.UI.Grid .It will be agility more and more.

toofu

December 29,

An example to change table to AW.UI.Grid..

<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>


<link href="source/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="source/lib/aw.js"></script>


<style>
.aw-grid-control {height: 200px; width: 100%; font: menu;}

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

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

<body>

<table id="gridtab" width="100%" border="1" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF" id="body_tab" onkeydown="move_rec(this,event.keyCode)" onclick="show_row_num(this,event.srcElement)">
<tr id="tr0" bgcolor="green">
<td width="20%">head1</td>
<td width="20%">head2</td>
<td width="20%">head3</td>
<td width="20%">head4</td>
<td width="20%">head5</td>
</tr>
<tr id="tr1">
<td width="20%">1</td>
<td width="20%">d</td>
<td width="20%">ff</td>
<td width="20%"> </td>
<td width="20%"> </td>
</tr>
<tr id="tr2">
<td>2</td>
<td>asdf</td>
<td>aa</td>
<td> </td>
<td> </td>
</tr>
<tr id="tr3">
<td>3</td>
<td>asdf</td>
<td>nnmnb</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td>af</td>
<td>5655</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>5</td>
<td>asd</td>
<td>1232</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td>fa</td>
<td>gk</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td>asdf</td>
<td>hjjg</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td>hhg</td>
<td>asdf</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>9</td>
<td>vvb</td>
<td>7</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>10</td>
<td>ert</td>
<td>3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>11</td>
<td>uuj</td>
<td>d</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>12</td>
<td>sa</td>
<td>1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>13</td>
<td>rg</td>
<td>a</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>14</td>
<td>aafd</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
/*******************************************
******Get data src from table obj*************
*******************************************/
var tab=window.gridtab;
var colArr=new Array(tab.rows[0].cells.length);
for(var i=0;i<tab.rows[0].cells.length;i++){
colArr[i]=tab.rows[0].cells[i].innerText;
}

var dataArr=new Array(tab.rows.length-1);
for(var i=1;i<tab.rows.length;i++){
dataArr[i-1]=new Array(tab.rows[i].cells.length);
for(var j=0;j<tab.rows[i].cells.length;j++){
dataArr[i-1][j]=tab.rows[i].cells[j].innerText;
}
}
/*******************************************/
myData=dataArr;
myColumns=colArr;

alert('Begin change table to AW.UI.Grid');

/*****Hidden old table**********************/
window.document.body.innerHTML='';

/********************************************/

// create ActiveWidgets Grid javascript object
var obj = new AW.UI.Grid;

// define data formats
var str = new AW.Formats.String;
var num = new AW.Formats.Number;

obj.setCellFormat([str, str, str, str,str]);

// provide cells and headers text
obj.setCellText(myData);
obj.setHeaderText(myColumns);

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

// enable row selectors
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});

// set headers width/height
obj.setSelectorWidth(28);
obj.setHeaderHeight(20);

// set row selection
obj.setSelectionMode("single-row");

// set click action handler
obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};

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

</body>
</html>

toofu

December 29,

This topic is archived.

How to use dynamic HTML String in ActiveWidget Grid?

See also:

Search

New Data Grid

Version 2