3.2.0
Forum Demo Guide API Store

Can we also have a fixed footer?

Hi
Can we also have a fixed column footer added to this superb utility?
As per my requirements,I need to have fixed header and footer grids,and both horizontal and vertical scroll for the data.When we move horizontally,the header and footer labels should move,while when we move vertically,the header and footer should not move.

Moreover,I'm having an issue with placing the entire scrollable content.it by default occupies the top-left portion of my page,I want to be centered.

can someone help me out with an easy fix for these?

Thanks in advance 

<html>
<head>
<style type="text/css">


#content
    {
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 30px;
    left: 0;
    margin: 0px; /* Put back for all the rest */
    overflow: auto; /* no need for Mac IE5 to see this */
    padding-right: 1em;	
    }
    
#footer
    {
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    bottom: 0;
    margin: 0;
    padding-right: 1em;	
    }
</style>

<style> body, html {margin:0px; padding: 0px; overflow: auto;} </style>
<!-- grid format -->
    <style>
        .active-controls-grid {height: 100%; font: menu;}

        .active-column-0 {width:  50px;}
        .active-column-1 {width: 150px;}
        .active-column-2 {width: 150px;}
        .active-column-3 {width: 150px;}
        .active-column-4 {width: 150px;}
        .active-column-5 {width: 150px;}
        .active-column-6 {width: 100px;}
        .active-column-7 {width: 100px;}
        .active-column-8 {width: 100px;}
        .active-column-9 {width: 100px;}
        .active-column-10 {width: 100px;}
        
        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}

        /* column header background */
        .active-scroll-top .active-box-item {
            font-family: Arial;
            font-size: 13px;
            text-align: left;
            font-weight: bold;
            background-color: #666666;
            height: 25px;
            color: white;
        } 

    </style>

    <!-- grid data -->
    
    <script>
        var myData = [
            ["001110","Vaid, Rahul", "1"," "," "," ", "10.0000","0.00","0.00","0.00","0.00"],
            ["001110","Fagiani, Christopher", "1"," "," "," ", "10.0000","0.00","0.00","0.00","0.00"],
            ["001110","Hanks, Tom", "1"," "," "," ", "10.0000","0.00","0.00","0.00","0.00"],
            ["001110","Helfter, Susan", "1"," "," "," ", "10.0000","0.00","0.00","0.00","0.00"],
            ["001110","Sharma, Manoj", "1"," "," "," ", "10.0000","0.00","0.00","0.00","0.00"],
            ["001110","Albright, Anthony", "1"," "," "," ", "10.0000","0.00","0.00","0.00","0.00"]
            
            
        ];

        var myColumns = [
            "File #", "Name", "Pay #", "Tax Frequency", "Temp Dept","Rate Code","Temp Rate","Reg Hours","O/T Hours","Reg Earnings","O/T Earnings"
        ];
    </script>
</head>

<body >
<div id="content">
<DIV id="ErrorDiv"></DIV>

<form name="PayDataBatchEntryForm" method="post" action="/eXperts/PayDataBatchEntryAction.do">

<div>
<input type="hidden" name="org.apache.struts.taglib.html.TOKEN" value="87f5420254c032c5b83b2722185c935c"></div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<STYLE ID="tssxyz" TYPE="text/css"></STYLE>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<link rel="stylesheet"  type="text/css" href="/xstatic/styles/ADPUI.css"/>
<link rel="stylesheet"  type="text/css" href="/xstatic/styles/ADPUI_addendum.css"/>
<script language="JavaScript" src="/xstatic/javascripts/PayXRelease13.js"> </script>
<script language="JavaScript" src="/xstatic/javascripts/dates.js"> </script>
<script language="JavaScript" src="/xstatic/javascripts/FormCheck.js"> </script>
<script language="JavaScript" src="/xstatic/javascripts/PayDataEntry.js"> </script>

<link rel="stylesheet"  type="text/css" href="/xstatic/styles/grid.css"/>
<script language="JavaScript" src="/xstatic/javascripts/grid.js"> </script>



<STYLE TYPE="text/css">
    .messageHdrStyle {font-family:"Arial";font-size:8pt;background-color:#ff0000;color:#ffffff;font-weight:bold;}
    .messageRowStyle {font-family:"Arial";font-size:8pt;background-color:#E9E9E9;}
</STYLE>

    <input type="hidden" name="total" value="" onchange="top.header.setDirtyFlag(true);" id="batchtotal_0">
    <input type="hidden" name="total" value="" onchange="top.header.setDirtyFlag(true);" id="batchtotal_1">
    <input type="hidden" name="total" value="" onchange="top.header.setDirtyFlag(true);" id="batchtotal_2">
    <input type="hidden" name="total" value="" onchange="top.header.setDirtyFlag(true);" id="batchtotal_3">
    <input type="hidden" name="total" value="" onchange="top.header.setDirtyFlag(true);" id="batchtotal_4">
    <input type="hidden" name="total" value="" onchange="top.header.setDirtyFlag(true);" id="batchtotal_5">
    <input type="hidden" name="total" value="45.0000" onchange="top.header.setDirtyFlag(true);" id="batchtotal_6">
    <input type="hidden" name="total" value="0.00" onchange="top.header.setDirtyFlag(true);" id="batchtotal_7">
    <input type="hidden" name="total" value="0.00" onchange="top.header.setDirtyFlag(true);" id="batchtotal_8">
    <input type="hidden" name="total" value="0.00" onchange="top.header.setDirtyFlag(true);" id="batchtotal_9">
    <input type="hidden" name="total" value="0.00" onchange="top.header.setDirtyFlag(true);" id="batchtotal_10">

<script language=JavaScript>
var imageNameArray = new Array();
//generate the help url
function getHelpURL(){
  var aUrl;
  aUrl = "https://support.adp.com/secure/px/help/help2.asp?context=paydataBatchEntry"
  showModelessDialog(aUrl,window,"status:false;dialogWidth:585px;resizable:yes;help:no;dialogLeft:300;dialogTop:0;dialogHeight:275px");
}
</script>
<table class='ADPUI-pageTitleTable' border='0' width='100%' cellspacing='0' cellpadding='0'>
    <tr>
        <td class='ADPUI-pageTitle' width='90%'>
            <table border='0' width='100%' cellspacing='0' cellpadding='0'>
                <tr class='ADPUI-pageTitle'><td width='18%'>Paydata Entry</td><td width='82%' align='right'><span class='ADPUI-fieldLabels'>Co:</span>&nbsp;&nbsp;&nbsp;
                <span class='ADPUI-normalText'>LOR</span>&nbsp;&nbsp;&nbsp;<span class='ADPUI-fieldLabels'>Batch:</span>&nbsp;&nbsp;&nbsp;
                <span class='ADPUI-normalText'>1AAAA&nbsp;-&nbsp;</span>&nbsp;&nbsp;&nbsp;<span class='ADPUI-fieldLabels'>Grid:</span>&nbsp;&nbsp;
                <span class='ADPUI-normalText'>ADP basic paydata&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></td></tr>
            </table>
        </td>
        <td class='hand'  width='10%' onClick=getHelpURL()> <img border='0' src='/xstatic/images/help_big.gif' alt='Click for help info on this page.' width='48' height='17'></a>
        </td>
    </tr>
</table>



<table class="ADPUI-centralObjectBg" border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20%" colspan="2">&nbsp;<span id="Name" class="ADPUI-objectID"></span></td>
    <td width="80%" align="right" colspan="2">
    	<button accesskey="F" class = "ADPUI-button" onClick="submitForm(this);setDispatch('find')">
      		<table cellpadding="0" cellspacing="0" border="0">
       		 <tr>
          		<td class="ADPUI-ActiveButtonsleft"></td>
          		<td class="ADPUI-ActiveButtons"><u>F</u>ind </td>
          		<td class="ADPUI-ActiveButtonsright"></td>
        	</tr>
      		</table>
        </button>
    </td>
  </tr>
  <tr>
    <td width="29%"><span class="ADPUI-fieldLabels">&nbsp;&nbsp;Co/File #:&nbsp;</span><span id="CoFile" class="ADPUI-normalText">&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
    <td width="19%"><span class="ADPUI-fieldLabels">Status:&nbsp;</span><span id="Status" class="ADPUI-normalText">&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
    <td width="17%"><span class="ADPUI-fieldLabels">SSN:&nbsp;</span><span id="Ssn" class="ADPUI-normalText">&nbsp;&nbsp;&nbsp;</span></td>
    <td width="35%"><span class="ADPUI-fieldLabels">Department:&nbsp;</span><span id="Dept" class="ADPUI-normalText"></span></td>
  </tr>
  <tr>
    <td width="29%"><span class="ADPUI-fieldLabels">&nbsp;&nbsp;Rate:&nbsp;</span><span id="Rate" class="ADPUI-normalText"></span></td>
    <td width="19%"><span class="ADPUI-fieldLabels">Rate 2:&nbsp;</span><span id="Rate2" class="ADPUI-normalText">&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
    <td width="17%"><span class="ADPUI-fieldLabels">Rate 3:&nbsp;</span><span id="Rate3" class="ADPUI-normalText">&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
    <td width="35%"><span class="ADPUI-fieldLabels">Std Hrs:&nbsp;</span><span id="StdHrs" class="ADPUI-normalText"></span></td>
  </tr>
</table>
<input type="hidden" name="currentNumberOfRecords" value="10" onchange="top.header.setDirtyFlag(true);" id="curNbOfRecs">



<div id="pagelinktablediv">
    <table id="pagelinktable" border="0" width="100%" >
        <tr>
            <td>
                <span class="ADPUI-fieldLabels">46 Found </span>
                <span class="pagelinks"> 
                <span class="ADPUI-fieldLabels">1 - 10
                <span class="ADPUI-fieldLabels">&nbsp|&nbsp  
                <span class="ADPUI-pagingNumLink" onclick='getDataForPage("2")' >11 - 20</span>&nbsp|&nbsp
                <span class="ADPUI-pagingNumLink" onclick='getDataForPage("3")' >21 - 30</span>&nbsp|&nbsp 
                <span class="ADPUI-pagingNumLink" onclick='getDataForPage("4")' >31 - 40</span> &nbsp;<img id="nextPageImage" border="0" src="/xstatic/images/next_icon.gif" onclick='getDataForPage("2")'></span>&nbsp&nbsp&nbsp&nbsp
                <span class="ADPUI-fieldLabels">Rows per page:&nbsp; 
                <select size="1" name="rowsPerPageOption" id="rowsPerPage" onChange="setMethod('changePageSize')">
                    <option value="10"selected >10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                </select></span>
            </td>
            <td align="left" id="AfterRowsPerPageTd"></td>
            <td  align="right" >
                <button id="addNewButton" class = "ADPUI-button" onClick="setMethod('addNew')">
                <table cellpadding="0" cellspacing="0">
                    <tr id="addNewButtonRow" >
                        <td  class="ADPUI-ActiveButtonsleft"></td>
                        <td nowrap id="addNewButtonText" class="ADPUI-ActiveButtons">Add New</td>
                        <td class="ADPUI-ActiveButtonsright"></td>
                    </tr>
                </table>
                </button>
            </td>
        </tr>
    </table>
</div>
</div>
<!--To be worked on -->
<div style="height:100%">
    <script>
    //	create ActiveWidgets Grid javascript object
    var obj = new Active.Controls.Grid;
    //	set number of rows/columns
    obj.setRowProperty("count", 6);
    obj.setRowHeaderWidth(50); 
    obj.setColumnProperty("count", 11);
    
    //provide alternate colors to rows
    var alternate = function(){
        return this.getRowProperty("order") % 2 ? "#FFFQFF" : "#E9E9E9";
    }
    var row = new Active.Templates.Row;
    row.setStyle("background", alternate);
    obj.setTemplate("row", row);

    //	provide cells and headers text
    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setColumnProperty("text", function(i){return myColumns[i]});
    //	set headers width/height
    obj.setRowHeaderWidth("0px");
    obj.setColumnHeaderHeight("30px");
    //	set click action handler
    obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
    
    //	write grid html to the page
    alert(('Rahul '+obj).substring(0,5000));
    
    document.writeln(obj);
    
    </script>
</div>
</DIV>
    
    
<!--Upto here -->
<SCRIPT LANGUAGE="javascript">
//window.onload = onLoadFunc;
//window.onresize = adjustGridPosition;
</SCRIPT>




</form>
</body>
</html>
Rahul
February 8,
Rahul,

Fixed columns and footers are built into version 2 but not available in version 1. Looking at your code, you are using version 1. If it is something that you absolutely need, then I suggest upgrading to version 2. With version 2, it's as simple as: 

obj.setFooterVisible(true);	// enable footer
obj.setFooterText(["Total:", "100.00", "200.00", "300.00"]);// same as header
obj.setFooterCount(2);
obj.setFooterHeight(30, 0);	// height of the first footer row
Jim Hunter (www.FriendsOfAW.com)
February 8,
With version 2 also being: $395.00 for single user or $2450 for a site...

Where as v1 was OpenSource...
Cris_co
February 8,

This topic is archived.

See also:

AW 2.0.2 - new bug-fix release. Alex (ActiveWidgets) (51)
Filter, Expert Footer, Expert ToolBar and more - Examples Paulo Cesar Silva Reis (PC from Brazil). (24)
Fix - combo template not closing in Firefox Alex (ActiveWidgets) (10)
Example - Footer with summary (count, sum, etc...) pc (9)
Fixing the row header Matt Philmon (8)
Beta 3 Footer Like Header Jim Shaffer (8)
How to sum the third column and put the summary into footer? Kevin (6)
Footer styles not working (Footer cells bigger than columns) Tonio (2)
GRID with drag body scroll and fixed column Alex from Sydney (6)
Footer STYLE Andreas Richter (5)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us