Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Carmine Marino on Feb 10, 2009 08:32
open dhtmlx forum
Grid Footer defined in XML. How do I set number formatting on footer cells.

We are using the Pro version of the DHTMLX libraries.

See attached example below

I have a footer that is defined inside the xml document using the attachFooter command. How do I set number formatting "$0,000.00" on footer cells?

Also why is there a scroll bar covering the normal row until I move my mouse pointer over it? If I don't have enableLightMouseNavigation(true); the scroll bar stays.

I noticed that I am losing formatting in my footer cells for text size and such. They don't match the regular rows. Is there a better way to accomplish attaching a footer? I tried adding some style fromatting as params. Is there a better way for the supplied xml?

I cannot call the grid.attachFooter function since I generate the all data for the grid on the server side.

thank you,
Carmine Marino

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

    <title>Example</title>

</head>


<body>


<link rel="STYLESHEET" type="text/css" href="scripts/dhtmlx2.0/dhtmlxgrid/codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="scripts/dhtmlx2.0/dhtmlxgrid/codebase/dhtmlxgrid_skins.css">
<link rel="STYLESHEET" type="text/css" href="scripts/dhtmlx2.0/dhtmlxgrid/codebase/skins/dhtmlxgrid__skin.css">
<script>_css_prefix="scripts/dhtmlx2.0/dhtmlxgrid/codebase/"; _js_prefix="scripts/dhtmlx2.0/dhtmlxgrid/codebase/"; </script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/dhtmlxcommon.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/dhtmlxgrid.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/dhtmlxgridcell.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/ext/dhtmlxgrid_pgn.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/ext/dhtmlxgrid_nxml.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/ext/dhtmlxgrid_form.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/excells/dhtmlxgrid_excell_calck.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/excells/dhtmlxgrid_excell_acheck.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/excells/dhtmlxgrid_excell_calendar.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/excells/dhtmlxgrid_excell_clist.js"></script>
<script src="scripts/dhtmlx2.0/dhtmlxgrid/codebase/excells/dhtmlxgrid_excell_link.js"></script>




<div id="accountBalanceGrid1" width="750px" height="100px" style="background-color:white;"></div>

<script language="JavaScript">
var accountBalanceGrid1 = new dhtmlXGridObject('accountBalanceGrid1');
accountBalanceGrid1.setImagePath("scripts/dhtmlx2.0/dhtmlxgrid/codebase/imgs/");
accountBalanceGrid1.enableAutoHeight(true,200);
accountBalanceGrid1.enableAutoWidth(true);
accountBalanceGrid1.attachEvent("onCellChanged",function(id,ind,value){
if (ind==1||ind==2||ind==3||ind==4) {
value = value.replace(/,/g,"").replace(/\$/g,"");
accountBalanceGrid1.cells(id,ind).cell.style.color = value>=0?"green":"red";
}
});

accountBalanceGrid1.enableLightMouseNavigation(true);
accountBalanceGrid1.init();
accountBalanceGrid1.setSkin("light");
accountBalanceGrid1.setEditable(false);

accountBalanceGrid1.loadXMLString("<?xml version='1.0' encoding='iso-8859-1'?><rows><head><column width='*' type='ro' align='left' sort='str'><![CDATA[ <div style='width:100%; text-align:center;'>Fund</div>]]></column><column width='*' type='edn' align='right' sort='na' format='$0,000.00'><![CDATA[ <div style='width:100%; text-align:center;'>Obligations</div>]]></column><column width='*' type='edn' align='right' sort='na' format='$0,000.00'><![CDATA[ <div style='width:100%; text-align:center;'>Adjustments</div>]]></column><column width='*' type='edn' align='right' sort='na' format='$0,000.00'><![CDATA[ <div style='width:100%; text-align:center;'>Receipts</div>]]></column><column width='*' type='edn' align='right' sort='na' format='$0,000.00'><![CDATA[ <div style='width:100%; text-align:center;'>Balance</div>]]></column><settings><colwidth>px</colwidth></settings><afterInit><call command='setNumberFormat'><param>$0,000.00</param><param>1</param></call><call command='attachFooter'><param>Total,2117172.35,0.00,2646.25,2114526.10</param><param>text-align:left;background-color:lightgrey;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal;,padding-right:0px;text-align:right;color:green;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal</param></call><call command='attachFooter'><param>Penalties,0.00,0.00,0.00,0.00</param><param>text-align:left;background-color:lightgrey;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal</param>></call><call command='attachFooter'><param>Grand Total,2117172.35,0.00,2646.25,2114526.10</param><param>text-align:left;background-color:lightgrey;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal,padding-right:0px;text-align:right;color:green;font-style:normal</param></call></afterInit></head><row id='0' ><cell> Dues</cell><cell>2117172.35</cell><cell>0.00</cell><cell>2646.25</cell><cell>2114526.10</cell></row></rows>");

</script>

</body>
</html>





Answer posted by Support on Feb 10, 2009 10:23
>> How do I set number formatting "$0,000.00" on footer cells?
The number formatting can't be applied just to plain text, but if you are using some kind of #stat_ based calculation in footer - it will reuse number formatting assigned to related column ( be sure to define column type as end or ron ) 

>>Also why is there a scroll bar covering the normal row until I move my mouse pointer over it?
Confirmed and fixed, fixed version of js file sent by email. 

>>They don't match the regular rows.
Formating defined by css rules for footer, in dhtmlxgrid_css it will be 
div.gridbox div.ftr td {
background-color:#FFFFCC;
border-right:1px solid gray;
border-top:1px solid gray;
font-family:arial;
font-size:12px;