Focal Point
Data Grid in HTML with JS or so???

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/3957000406

May 18, 2011, 06:58 AM
ChristianP
Data Grid in HTML with JS or so???
Hello,
my new task is to build a datagrid (without Maintain) where the user can add values(int), and if nesseray
collapse a new row to add content. the last row has to build the sum of the added values(int).
The grid will have 3 columns and max. 8 rows.


WF Production Version: 7.7.02M
WF Test Version: 7.7.02M
Developer Studio: 7.7.02
HTML, EXL2K, FLEX, PDF,PPT
May 18, 2011, 08:45 AM
<JG>
I believe that you are looking for something like this Christian

 TABLE FILE CAR
PRINT
COMPUTE ROWCNT/I1= LAST ROWCNT + 1; NOPRINT
COMPUTE COL1/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL1" id="R8C1" />'  ELSE 
'<input type="text" name="COL1" id="R'||EDIT(ROWCNT)||'C1" onChange="addIt();" />'; AS ''
COMPUTE COL2/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL2" id="R8C2" />'  ELSE 
'<input type="text" name="COL2" id="R'||EDIT(ROWCNT)||'C2" onChange="addIt();" />'; AS ''
COMPUTE COL3/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL3" id="R8C3" />'  ELSE 
'<input type="text" name="COL3" id="R'||EDIT(ROWCNT)||'C3" onChange="addIt();" />'; AS ''
COMPUTE BTN/A200=  IF ROWCNT GE 7 THEN ''  ELSE 
'<input type=button value="+/-" onClick="showHide('||EDIT(ROWCNT)||');"</input>'; AS ''

BY MODEL NOPRINT

WHERE RECORDLIMIT EQ 8
ON TABLE HOLD AS DATAGRID FORMAT HTMTABLE
ON TABLE SET PAGE NOLEAD
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script javascript>
function initialHide(){
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');

for ( i=1; i<7;i++) {
  rows[i].style.display='none';
}
}

function showHide(onRow){
var doFrom = onRow;
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');
var nextStyle=rows[doFrom].style.display;

if (nextStyle != 'none'){
for ( i=doFrom; i<7;i++) {
  rows[i].style.display='none';
  }
}
else 
  rows[doFrom].style.display='';
}

function addIt(){
document.getElementById("R8C1").value = (document.getElementById("R1C1").value -0) 
                                      + (document.getElementById("R2C1").value -0) 
                                      + (document.getElementById("R3C1").value -0) 
                                      + (document.getElementById("R4C1").value -0) 
                                      + (document.getElementById("R5C1").value -0) 
                                      + (document.getElementById("R6C1").value -0) 
                                      + (document.getElementById("R7C1").value -0) ;
document.getElementById("R8C2").value = (document.getElementById("R1C2").value -0) 
                                      + (document.getElementById("R2C2").value -0) 
                                      + (document.getElementById("R3C2").value -0) 
                                      + (document.getElementById("R4C2").value -0) 
                                      + (document.getElementById("R5C2").value -0) 
                                      + (document.getElementById("R6C2").value -0) 
                                      + (document.getElementById("R7C2").value -0) ;
document.getElementById("R8C3").value = (document.getElementById("R1C3").value -0) 
                                      + (document.getElementById("R2C3").value -0) 
                                      + (document.getElementById("R3C3").value -0) 
                                      + (document.getElementById("R4C3").value -0) 
                                      + (document.getElementById("R5C3").value -0) 
                                      + (document.getElementById("R6C3").value -0) 
                                      + (document.getElementById("R7C3").value -0) ;

}
</script>

</head>
<body onLoad="initialHide();">
!IBI.FIL.DATAGRID;
</body>
</html>
-HTMLFORM END

This message has been edited. Last edited by: <JG>,
May 18, 2011, 08:54 AM
ABT
Holy Crap, that's awesome JG. I took the initial request to say he wanted to write it back to the table (i.e. the Maintain reference). I'm not seeing any MODIFYs or servelet calls so I'm assuming yours does not.

What would that piece look like (for my own knowledge)?

- ABT


------------------------------------
WF Environment:
------------------------------------
Server/Client, ReportCaster, Dev Studio: 7.6.11
Resource Analyzer, Resource Governor, Library, Maintain, InfoAssist
OS: Windows Server 2003
Application/Web Server: Tomcat 5.5.25
Java: JDK 1.6.0_03
Authentication: LDAP, MRREALM Driver
Output: PDF, EXL2K, HTM

------------------------------------
Databases:
------------------------------------
Oracle 10g
DB2 (AS/400)
MSSQL Server 2005
Access/FoxPro
May 18, 2011, 09:11 AM
ChristianP
Hello JG,
that,s really great stuff!!!!!!
ABT is right, i need to write each value with a modify in a sql server 2005 table.

Christian


WF Production Version: 7.7.02M
WF Test Version: 7.7.02M
Developer Studio: 7.7.02
HTML, EXL2K, FLEX, PDF,PPT
May 18, 2011, 09:26 AM
<JG>
As a re-entrant focexec it would be something like this, Obviously if you are doing an operation on a data base you will also
neeed to pass the key value

you do that using


HREF= HREF + "&|MATCHKEY=!IBI.AMP.MATCHKEY;";

Where MATCHKEY is an & variable that you pass into the focexec initially.

This example is for MRE so you need to change HREF= HREF + "&|IBIMR_drill=X,mredomaine/mredomain.htm";
to match your own domain


 
-DEFAULTH &STARTAT='DATAGRID';
-DEFAULTH &MATCHKEY='XYZ'
-GOTO &STARTAT.EVAL
-DATAGRID
DEFINE  FILE CAR
LOADDATA/A200='<input type=button value="Load" onClick="doLoad();"></input>';
END
TABLE FILE CAR
PRINT
COMPUTE ROWCNT/I1= LAST ROWCNT + 1; NOPRINT
COMPUTE COL1/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL1" id="R8C1" />'  ELSE 
                                        '<input type="text" name="COL1" id="R'||EDIT(ROWCNT)||'C1" onChange="addIt();" />'; AS ''
COMPUTE COL2/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL2" id="R8C2" />'  ELSE 
                                        '<input type="text" name="COL2" id="R'||EDIT(ROWCNT)||'C2" onChange="addIt();" />'; AS ''
COMPUTE COL3/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL3" id="R8C3" />'  ELSE 
                                        '<input type="text" name="COL3" id="R'||EDIT(ROWCNT)||'C3" onChange="addIt();" />'; AS ''
COMPUTE BTN/A200=  IF ROWCNT GE 7 THEN ''  ELSE 
                                       '<input type=button value="+/-" onClick="showHide('||EDIT(ROWCNT)||');"</input>'; AS ''
BY MODEL NOPRINT
ON TABLE SUBFOOT
"<LOADDATA"
WHERE RECORDLIMIT EQ 8
ON TABLE HOLD AS DATAGRID FORMAT HTMTABLE
ON TABLE SET PAGE NOLEAD
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script javascript>
function initialHide(){
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');

for ( i=1; i<7;i++) {
  rows[i].style.display='none';
}
}

function showHide(onRow){
var doFrom = onRow;
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');
var nextStyle=rows[doFrom].style.display;

if (nextStyle != 'none'){
for ( i=doFrom; i<7;i++) {
  rows[i].style.display='none';
  }
}
else
  rows[doFrom].style.display='';
}

function addIt(){
document.getElementById("R8C1").value = (document.getElementById("R1C1").value -0)
                                      + (document.getElementById("R2C1").value -0)
                                      + (document.getElementById("R3C1").value -0)
                                      + (document.getElementById("R4C1").value -0)
                                      + (document.getElementById("R5C1").value -0)
                                      + (document.getElementById("R6C1").value -0)
                                      + (document.getElementById("R7C1").value -0) ;
document.getElementById("R8C2").value = (document.getElementById("R1C2").value -0)
                                      + (document.getElementById("R2C2").value -0)
                                      + (document.getElementById("R3C2").value -0)
                                      + (document.getElementById("R4C2").value -0)
                                      + (document.getElementById("R5C2").value -0)
                                      + (document.getElementById("R6C2").value -0)
                                      + (document.getElementById("R7C2").value -0) ;
document.getElementById("R8C3").value = (document.getElementById("R1C3").value -0)
                                      + (document.getElementById("R2C3").value -0)
                                      + (document.getElementById("R3C3").value -0)
                                      + (document.getElementById("R4C3").value -0)
                                      + (document.getElementById("R5C3").value -0)
                                      + (document.getElementById("R6C3").value -0)
                                      + (document.getElementById("R7C3").value -0) ;

}
function doLoad(){
var value1=document.getElementById("R8C1").value;
var value2=document.getElementById("R8C2").value;
var value3=document.getElementById("R8C3").value;
HREF="/ibi_apps/WFServlet?";
HREF= HREF + "IBIF_webapp=/ibi_apps";
HREF= HREF + "&|IBIC_server=EDASERVE";
HREF= HREF + "&|IBIWF_msgviewer=OFF";
HREF= HREF + "&|IBIAPP_app=baseapp";
HREF= HREF + "&|IBIMR_drill=X,mredomaine/mredomain.htm";
HREF= HREF + "&|IBIF_ex=app/datagrid";
HREF= HREF + "&|CLICKED_ON=";
HREF= HREF + "&|MATCHKEY=!IBI.AMP.MATCHKEY;";
HREF= HREF + "&|VALUE1="+value1;
HREF= HREF + "&|VALUE2="+value2;
HREF= HREF + "&|VALUE3="+value3;
HREF= HREF + "&|STARTAT=LOADDATA";
HREF= HREF + "&|Random="+(Math.random()); 
window.open(HREF,'dataload','menubar=1,resizable=1,width=800,height=500');
}
</script>

</head>
<body onLoad="initialHide();">
!IBI.FIL.DATAGRID;
</body>
</html>
-HTMLFORM END
-RUN
-EXIT
-LOADDATA
MODIFY FILE whatever
FIXFORM Statements
MATCH Statements
ON MATCH Statements
ON NOMATCH Statements
DATA
&MATCHKEY.EVAL,&VALUE1.EVAL,&VALUE2.EVAL,&VALUE3.EVAL
END


edit so that you do not have to scroll to view.

This message has been edited. Last edited by: <JG>,
May 18, 2011, 12:24 PM
<JG>
Had a thought. Perhaps you would like to pre-populate the grid

-* File datagrid.fex
-DEFAULTH &STARTAT='DATAGRID';
-DEFAULTH &MATCHKEY='XYZ'
-GOTO &STARTAT.EVAL
-DATAGRID
DEFINE  FILE CAR
LOADDATA/A200='<input type=button value="Load" onClick="doLoad();"></input>';
END
TABLE FILE CAR
PRINT
COMPUTE ROWCNT/I1= LAST ROWCNT + 1; NOPRINT
COMPUTE COL1/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL1" id="R8C1" />'  ELSE 
'<input type="text" name="COL1" value='||FTOA(DCOST, '(D7c)', 'A10')||' id="R'||EDIT(ROWCNT)||'C1" onChange="addIt();" />'; AS ''
COMPUTE COL2/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL2" id="R8C2" />'  ELSE 
'<input type="text" name="COL2" value='||FTOA(RCOST, '(D7c)', 'A10')||' id="R'||EDIT(ROWCNT)||'C2" onChange="addIt();" />'; AS ''
COMPUTE COL3/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL3" id="R8C3" />'  ELSE 
'<input type="text" name="COL3" value='||FTOA(SEATS, '(D7c)', 'A10')||' id="R'||EDIT(ROWCNT)||'C3" onChange="addIt();" />'; AS ''
COMPUTE BTN/A200=  IF ROWCNT GE 7 THEN ''  ELSE 
'<input type=button value="+/-" onClick="showHide('||EDIT(ROWCNT)||');"</input>'; AS ''
BY MODEL NOPRINT
ON TABLE SUBFOOT
"<LOADDATA &|copy; FOCALPOINT"
WHERE RECORDLIMIT EQ 8
ON TABLE HOLD AS DATAGRID FORMAT HTMTABLE
ON TABLE SET PAGE NOLEAD
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script javascript>
function initialHide(){
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');

for ( i=1; i<7;i++) {
  rows[i].style.display='none';
}
addIt();
}

function showHide(onRow){
var doFrom = onRow;
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');
var nextStyle=rows[doFrom].style.display;

if (nextStyle != 'none'){
for ( i=doFrom; i<7;i++) {
  rows[i].style.display='none';
  }
}
else
  rows[doFrom].style.display='';
}

function addIt(){
document.getElementById("R8C1").value = (document.getElementById("R1C1").value -0)
                                      + (document.getElementById("R2C1").value -0)
                                      + (document.getElementById("R3C1").value -0)
                                      + (document.getElementById("R4C1").value -0)
                                      + (document.getElementById("R5C1").value -0)
                                      + (document.getElementById("R6C1").value -0)
                                      + (document.getElementById("R7C1").value -0) ;
document.getElementById("R8C2").value = (document.getElementById("R1C2").value -0)
                                      + (document.getElementById("R2C2").value -0)
                                      + (document.getElementById("R3C2").value -0)
                                      + (document.getElementById("R4C2").value -0)
                                      + (document.getElementById("R5C2").value -0)
                                      + (document.getElementById("R6C2").value -0)
                                      + (document.getElementById("R7C2").value -0) ;
document.getElementById("R8C3").value = (document.getElementById("R1C3").value -0)
                                      + (document.getElementById("R2C3").value -0)
                                      + (document.getElementById("R3C3").value -0)
                                      + (document.getElementById("R4C3").value -0)
                                      + (document.getElementById("R5C3").value -0)
                                      + (document.getElementById("R6C3").value -0)
                                      + (document.getElementById("R7C3").value -0) ;

}
function doLoad(){
var value1=document.getElementById("R8C1").value;
var value2=document.getElementById("R8C2").value;
var value3=document.getElementById("R8C3").value;
HREF="/ibi_apps/WFServlet?";
HREF= HREF + "IBIF_webapp=/ibi_apps";
HREF= HREF + "&|IBIC_server=EDASERVE";
HREF= HREF + "&|IBIWF_msgviewer=OFF";
HREF= HREF + "&|IBIAPP_app=baseapp";
HREF= HREF + "&|IBIMR_drill=X,mredomaine/mredomain.htm";
HREF= HREF + "&|IBIF_ex=app/datagrid";
HREF= HREF + "&|CLICKED_ON=";
HREF= HREF + "&|MATCHKEY=!IBI.AMP.MATCHKEY;";
HREF= HREF + "&|VALUE1="+value1;
HREF= HREF + "&|VALUE2="+value2;
HREF= HREF + "&|VALUE3="+value3;
HREF= HREF + "&|STARTAT=LOADDATA";
HREF= HREF + "&|Random="+(Math.random()); 
window.open(HREF,'dataload','menubar=1,resizable=1,width=800,height=500');
}
</script>

</head>
<body onLoad="initialHide();">
!IBI.FIL.DATAGRID;
</body>
</html>
-HTMLFORM END
-RUN
-EXIT
-LOADDATA
MODIFY FILE whatever
FIXFORM Statements
MATCH Statements
ON MATCH Statements
ON NOMATCH Statements
DATA
&MATCHKEY.EVAL,&VALUE1.EVAL,&VALUE2.EVAL,&VALUE3.EVAL
END

May 18, 2011, 01:41 PM
ABT
ABT files away 're-entrant focexec'. This is very, very cool and seems like you just had it laying around (or are a heck of a fast coder).

- ABT

Nice Thread


------------------------------------
WF Environment:
------------------------------------
Server/Client, ReportCaster, Dev Studio: 7.6.11
Resource Analyzer, Resource Governor, Library, Maintain, InfoAssist
OS: Windows Server 2003
Application/Web Server: Tomcat 5.5.25
Java: JDK 1.6.0_03
Authentication: LDAP, MRREALM Driver
Output: PDF, EXL2K, HTM

------------------------------------
Databases:
------------------------------------
Oracle 10g
DB2 (AS/400)
MSSQL Server 2005
Access/FoxPro
May 18, 2011, 02:47 PM
<JG>
25 years+ working with FOCUS/WebFOCUS.

Written from scratch, based on remembering all the issues I’ve had to accommodate over the years.

"Fast" yes WebFOCUS is fast when you understand it. Training and most important, experiance are the keys.

I might have chosen another word for "issues" but the spam filter would have * it.

There are still a lot of us "old" guys&gals out there.

Ask a question that is a challenge and get a solution.

Ask a question that is WF 101 course level and get ignored.

Sorry there is too much 101 going on at the moment.
May 18, 2011, 03:11 PM
<JG>
Try doing something like this with any other BI tool.

I think not.
May 19, 2011, 02:14 AM
ChristianP
HI JG,

thanks a lot so far!!! i am now working with WebFOCUS for 10 months and i am surprised every day about the possibilities. i will check out you code.
is it a problem to embed the grid in a normal form?? i think a have a another challenge!!!
is it also possible to implement a list box in the first cell of every row. so that the user can choose, for what kind of materials in my case, he fills out the grid.
the content of the list_box is always the same.

Christian


WF Production Version: 7.7.02M
WF Test Version: 7.7.02M
Developer Studio: 7.7.02
HTML, EXL2K, FLEX, PDF,PPT
May 19, 2011, 03:24 AM
<JG>
Christian, with a static select in the first column and using a standard form for submission.

 

-DEFAULTH &STARTAT='DATAGRID';
-DEFAULTH &MATCHKEY='XYZ'
-GOTO &STARTAT.EVAL
-DATAGRID
DEFINE  FILE CAR
LOADDATA/A200='<input type=submit value="Load" ></input>';
END
TABLE FILE CAR
PRINT
COMPUTE ROWCNT/I1= LAST ROWCNT + 1; NOPRINT
COMPUTE COL1/A4000=  IF ROWCNT EQ 8 THEN ''  ELSE
'<SELECT id="R'||EDIT(ROWCNT)||'C1" name="R'||EDIT(ROWCNT)||'C1">'||
'<OPTION value=Value1 selected displaytext="Value1">Value1</OPTION>'|| 
'<OPTION value=Value2 displaytext="Value2">Value2</OPTION>'|| 
'<OPTION value=Value3 displaytext="Value3">Value3</OPTION>'|| 
'<OPTION value=Value4 displaytext="Value4">Value4</OPTION></SELECT>' ; AS ''
COMPUTE COL2/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL2" id="R8C2" />'  ELSE '<input type="text" name="R'||EDIT(ROWCNT)||'C2" id="R'||EDIT(ROWCNT)||'C2" onChange="addIt();" />'; AS ''
COMPUTE COL3/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL3" id="R8C3" />'  ELSE '<input type="text" name="R'||EDIT(ROWCNT)||'C3" id="R'||EDIT(ROWCNT)||'C3" onChange="addIt();" />'; AS ''
COMPUTE BTN/A200=  IF ROWCNT GE 7 THEN ''  ELSE '<input type=button value="+/-" onClick="showHide('||EDIT(ROWCNT)||');"</input>'; AS ''
BY MODEL NOPRINT
ON TABLE SUBFOOT
"<LOADDATA"
WHERE RECORDLIMIT EQ 8
ON TABLE HOLD AS DATAGRID FORMAT HTMTABLE
ON TABLE SET PAGE NOLEAD
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script javascript>
function initialHide(){
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');

for ( i=1; i<7;i++) {
  rows[i].style.display='none';
}
}

function showHide(onRow){
var doFrom = onRow;
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');
var nextStyle=rows[doFrom].style.display;

if (nextStyle != 'none'){
for ( i=doFrom; i<7;i++) {
  rows[i].style.display='none';
  }
}
else
  rows[doFrom].style.display='';
}

function addIt(){
//document.getElementById("R8C1").value = (document.getElementById("R1C1").value -0)
//                                      + (document.getElementById("R2C1").value -0)
//                                      + (document.getElementById("R3C1").value -0)
//                                      + (document.getElementById("R4C1").value -0)
//                                      + (document.getElementById("R5C1").value -0)
//                                      + (document.getElementById("R6C1").value -0)
//                                      + (document.getElementById("R7C1").value -0) ;
document.getElementById("R8C2").value = (document.getElementById("R1C2").value -0)
                                      + (document.getElementById("R2C2").value -0)
                                      + (document.getElementById("R3C2").value -0)
                                      + (document.getElementById("R4C2").value -0)
                                      + (document.getElementById("R5C2").value -0)
                                      + (document.getElementById("R6C2").value -0)
                                      + (document.getElementById("R7C2").value -0) ;
document.getElementById("R8C3").value = (document.getElementById("R1C3").value -0)
                                      + (document.getElementById("R2C3").value -0)
                                      + (document.getElementById("R3C3").value -0)
                                      + (document.getElementById("R4C3").value -0)
                                      + (document.getElementById("R5C3").value -0)
                                      + (document.getElementById("R6C3").value -0)
                                      + (document.getElementById("R7C3").value -0) ;

}
</script>

</head>
<body onLoad="initialHide();">
<form name="datagrid" action="/ibi_apps/WFServlet?" method="POST">
<input type=hidden name=IBIF_webapp     id=IBIF_webapp     value="/ibi_apps"/>
<input type=hidden name=IBIC_server     id=IBIC_server     value="EDASERVE"/>
<input type=hidden name=IBIWF_msgviewer id=IBIWF_msgviewer value="OFF"/>
<input type=hidden name=IBIAPP_app      id=IBIAPP_app      value="baseapp"/>
<input type=hidden name=IBIMR_drill     id=IBIMR_drill     value="X,yourdomain/yourdomain.htm"/>
<input type=hidden name=IBIF_ex         id=IBIF_ex         value="app/datagrid"/>
<input type=hidden name=CLICKED_ON      id=CLICKED_ON      value=""/>
<input type=hidden name=STARTAT         id=STARTAT         value="LOADDATA"/>
<input type=hidden name=MATCHKEY        id=MATCHKEY        value="!IBI.AMP.MATCHKEY;"/>
!IBI.FIL.DATAGRID;
</form>
</body>
</html>
-HTMLFORM END
-RUN
-EXIT
-LOADDATA
-? &

May 19, 2011, 07:12 AM
ChristianP
Hello JG,

thanks a lot again!! i did not really get it how i can implement the grid in a normal html
side, which a disigned with the html composer.

Christian


WF Production Version: 7.7.02M
WF Test Version: 7.7.02M
Developer Studio: 7.7.02
HTML, EXL2K, FLEX, PDF,PPT
May 19, 2011, 07:39 AM
<JG>
Christian,

The problem with the composer is that it does not allow you to insert a table.
Controlling the collapse/expand functionality is much easier using a table
than trying to do it on the code that the composer generates.

Although you could do it.
May 19, 2011, 08:07 AM
ChristianP
JG,

i just ask because i have to add some normal text_boxes and some check_boxes to the form. i think
i can just add them by copying the code that the composer generates. i thought it would be the best to start with the difficult part of the form.


Christian


WF Production Version: 7.7.02M
WF Test Version: 7.7.02M
Developer Studio: 7.7.02
HTML, EXL2K, FLEX, PDF,PPT
May 19, 2011, 08:33 AM
<JG>
To be honest if you are not very comfortable hand coding the html
your best option is to generate the code you need using a standard html designer
and copying and pasting form that.

The code generated by the composer is very dificult to manipulate.
May 19, 2011, 08:44 AM
ChristianP
Okay, i will try it with another html designer!! Last question, how can i add headers to the columns, after i wrote something between the '', the symbol for +/- disapperas.

Thanks a lot again!! For the great stuff!!!

Christian


WF Production Version: 7.7.02M
WF Test Version: 7.7.02M
Developer Studio: 7.7.02
HTML, EXL2K, FLEX, PDF,PPT
May 19, 2011, 09:04 AM
<JG>
That's because you have added an extra row into the table by having AS 'column title'

All you need to do is change the counters in the JS

it should now look like this

 for ( i=2; i<8;i++) {
  rows[i].style.display='none';
}
}

function showHide(onRow){
var doFrom = onRow +1;
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');
var nextStyle=rows[doFrom].style.display;
alert(nextStyle);
if (nextStyle != 'none'){
for ( i=doFrom; i<8;i++) {
  rows[i].style.display='none';
  }
}
else
  rows[doFrom].style.display='';
}


Remember if you add additional rows above the table you will have to adjust it
May 20, 2011, 04:54 AM
ChristianP
Hello JG,

just one short question bevor the weekend beginns, how can i implement a dynamic list in the first column. Thank you and nice weekend to everyone!!!

Christian


WF Production Version: 7.7.02M
WF Test Version: 7.7.02M
Developer Studio: 7.7.02
HTML, EXL2K, FLEX, PDF,PPT
May 20, 2011, 05:51 AM
<JG>
like this

 -DEFAULTH &STARTAT='DATAGRID';
-DEFAULTH &MATCHKEY='XYZ'
-GOTO &STARTAT.EVAL
-DATAGRID
TABLE FILE CAR
PRINT
COMPUTE ROWCNT/I1= LAST ROWCNT + 1; NOPRINT
COMPUTE SELECTED/A10= IF ROWCNT EQ 1 THEN ' selected' ELSE ' '; NOPRINT
COMPUTE FOOT/A200='''</SELECT>'';' ; NOPRINT
COMPUTE SELECT/A200='''<OPTION value="' ||CAR|| '"' || SELECTED || ' displaytext="'||CAR|| '">'||CAR|| '</OPTION> '' ||'; AS ''
ON TABLE SUBFOOT
"<ST.FOOT AS ''"
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE SET PAGE NOLEAD
ON TABLE SAVE AS SELECTLIST FORMAT WP
END
-RUN

DEFINE  FILE CAR
LOADDATA/A200='<input type=submit value="Load" ></input>';
END
TABLE FILE CAR
PRINT
COMPUTE ROWCNT/I1= LAST ROWCNT + 1; NOPRINT
COMPUTE COL1/A4000=  IF ROWCNT EQ 8 THEN ''  ELSE
'<SELECT id="R'||EDIT(ROWCNT)||'C1" name="R'||EDIT(ROWCNT)||'C1">'||
-MRNOEDIT -INCLUDE SELECTLIST
COMPUTE COL2/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL2" id="R8C2" />'  ELSE '<input type="text" name="R'||EDIT(ROWCNT)||'C2" id="R'||EDIT(ROWCNT)||'C2" onChange="addIt();" />'; AS 'Col1'
COMPUTE COL3/A200= IF ROWCNT EQ 8 THEN  '<input type="text" name="COL3" id="R8C3" />'  ELSE '<input type="text" name="R'||EDIT(ROWCNT)||'C3" id="R'||EDIT(ROWCNT)||'C3" onChange="addIt();" />'; AS 'Col2'
COMPUTE BTN/A200=  IF ROWCNT GE 7 THEN ''  ELSE '<input type=button value="+/-" onClick="showHide('||EDIT(ROWCNT)||');"</input>'; AS ''
BY MODEL NOPRINT
ON TABLE SUBFOOT
"<LOADDATA"
WHERE RECORDLIMIT EQ 8
ON TABLE HOLD AS DATAGRID FORMAT HTMTABLE
ON TABLE SET PAGE NOLEAD
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script javascript>
function initialHide(){
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');

for ( i=2; i<8;i++) {
  rows[i].style.display='none';
}
}

function showHide(onRow){
var doFrom = onRow + 1;
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');
var nextStyle=rows[doFrom].style.display;

if (nextStyle != 'none'){
for ( i=doFrom; i<8;i++) {
  rows[i].style.display='none';
  }
}
else
  rows[doFrom].style.display='';
}

function addIt(){
//document.getElementById("R8C1").value = (document.getElementById("R1C1").value -0)
//                                      + (document.getElementById("R2C1").value -0)
//                                      + (document.getElementById("R3C1").value -0)
//                                      + (document.getElementById("R4C1").value -0)
//                                      + (document.getElementById("R5C1").value -0)
//                                      + (document.getElementById("R6C1").value -0)
//                                      + (document.getElementById("R7C1").value -0) ;
document.getElementById("R8C2").value = (document.getElementById("R1C2").value -0)
                                      + (document.getElementById("R2C2").value -0)
                                      + (document.getElementById("R3C2").value -0)
                                      + (document.getElementById("R4C2").value -0)
                                      + (document.getElementById("R5C2").value -0)
                                      + (document.getElementById("R6C2").value -0)
                                      + (document.getElementById("R7C2").value -0) ;
document.getElementById("R8C3").value = (document.getElementById("R1C3").value -0)
                                      + (document.getElementById("R2C3").value -0)
                                      + (document.getElementById("R3C3").value -0)
                                      + (document.getElementById("R4C3").value -0)
                                      + (document.getElementById("R5C3").value -0)
                                      + (document.getElementById("R6C3").value -0)
                                      + (document.getElementById("R7C3").value -0) ;

}
</script>

</head>
<body onLoad="initialHide();">
<form name="datagrid" action="/ibi_apps/WFServlet?" method="POST">
<input type=hidden name=IBIF_webapp     id=IBIF_webapp     value="/ibi_apps"/>
<input type=hidden name=IBIC_server     id=IBIC_server     value="EDASERVE"/>
<input type=hidden name=IBIWF_msgviewer id=IBIWF_msgviewer value="OFF"/>
<input type=hidden name=IBIAPP_app      id=IBIAPP_app      value="baseapp"/>
<input type=hidden name=IBIMR_drill     id=IBIMR_drill     value="X,yourdomain/yourdomain.htm"/>
<input type=hidden name=IBIF_ex         id=IBIF_ex         value="app/datagrid"/>
<input type=hidden name=CLICKED_ON      id=CLICKED_ON      value=""/>
<input type=hidden name=STARTAT         id=STARTAT         value="LOADDATA"/>
<input type=hidden name=MATCHKEY        id=MATCHKEY        value="!IBI.AMP.MATCHKEY;"/>
!IBI.FIL.DATAGRID;
</form>
</body>
</html>
-HTMLFORM END
-RUN
-EXIT
-LOADDATA
-? &

May 23, 2011, 08:34 AM
ChristianP
Hello JG,
thanks for the code. How can i implement an alpha file as an source for the list_field. i have reached the limit of the WP output format!!

Thanks a lot

Christian


WF Production Version: 7.7.02M
WF Test Version: 7.7.02M
Developer Studio: 7.7.02
HTML, EXL2K, FLEX, PDF,PPT