3.2.0

Grid full page height

Hello,

I am currently using the test version of ActiveWidgets, in order to see if we can use it in our company. I want to use the grid component and show it in a page, but with the full height of the page.
However, I can not get it working. I have tried different solutions I found on the forum, but I don't seem to find the right one.

This is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Opportunity Pipeline Analysis</title>
<style> 
td {
font-family: Verdana;
font-size: 11px;
}
th {
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
white-space: nowrap;
}
 
#myGrid .aw-column-5 {text-align: right} /* align to the right */ 
#myGrid .aw-column-6 {text-align: right} /* align to the right */ 
#myGrid .aw-column-7 {text-align: right} /* align to the right */ 
#myGrid .aw-column-8 {text-align: right} /* align to the right */ 
#myGrid .aw-column-9 {text-align: right} /* align to the right */ 
#myGrid .aw-column-10 {text-align: right} /* align to the right */ 
#myGrid .aw-column-11 {text-align: right} /* align to the right */ 
a.aw-cells-normal:visited, a.aw-cells-normal:link, a.aw-cells-normal:hover { color: #F90; }
</style>
<script src="../../../../js/activeWidgets/lib/aw.js" type="text/javascript"></script>
<link href="../../../../js/activeWidgets/styles/system/aw.css" rel="stylesheet">
</head>
 
<body style="margin: 0; height: 100%;">
<script type="text/javascript"> 
var myData = [
    ["WWN-OPP000205","MES gekoppeld aan APS","WW","_MES","MES Project","","1",300.000,300.000,"20 %",60.000,"5637196768","wwn"]
    ,	["WWN-OPP000660","Koppeling Maintenance Productie","WW","55-00017","EAM Adapters for SAP PM 6.0","","1",8.440,8.440,"20 %",1.688,"5637227619","wwn"]
    ,	["WWN-OPP000660","Koppeling Maintenance Productie","WW","55-00020","Condition Based Monitoring, v2.0&nbsp;- 50 Eq","","1",8.865,8.865,"20 %",1.773,"5637227619","wwn"]
    
];
 
var myHeaders = ["Opp. #", "Opp. name", "Brand", "Item #","Item description","Exp. order date","Qty","Value piece","Value unweighed","Probability","Value weighed","RecId","DataAreaId"];
 
</script>
 
<div id="myGrid" style="width: 100%; height:100%; table-layout: fixed;"></div>
 
<script type="text/javascript"> 
 
    var num = new AW.Formats.Number;
    num.setTextFormat("#.###,");
    
    var currency = new AW.Formats.Number; 
    currency.setTextFormat("€ ###.###,##");  
    
    var grid = new AW.UI.Grid;
    grid.setId("myGrid");
    grid.setHeaderText(myHeaders);
    grid.setVirtualMode(false);
    grid.setCellData(myData);
    grid.setCellFormat(num, 6);
    grid.setCellFormat(currency, 7);
    grid.setCellFormat(currency, 8);
    grid.setCellFormat(currency, 10);
    grid.setColumnCount(11);
    grid.setColumnWidth(200, 1); 
    grid.setSelectionMode("multi-row"); 
    grid.setRowCount(3);
    grid.setStyle("width", "99%");
    grid.setStyle("height", "500px");
    var link = new AW.Templates.Link;
    link.setAttribute("target", "_new");
    
    var myLinks = function(column, row){
    return "dynamics://0/?drilldown_0tableid=1967recid=" + myData[row][11] + "companyid=" + myData[row][12];
    }
 
    grid.setCellLink(myLinks);
    grid.setCellTemplate(new AW.Templates.Link, 0);
 
    grid.refresh();
</script>
</body>
</html>


Thanks for your help!
Sander Mertens
November 1,
<style>
html, body, div {width: 100%; height: 100% }
</style>
Patrick Brandão
November 4,

This topic is archived.

See also:


Back to support forum