Hello every body,
Can i change the skin (or color) of my footer rows of my grid ?
are there methods for doing this?
Thanks for any help.
best regards.
You can customize default skin colors in dhtmxgrid.cs
div.gridbox div.ftr td { // this rule define default footer
div.gridbox_light div.ftr td { // footer classes for specific skins
Also, you can set some custom styles directly from attachFooter command
grid.attachFooter(“A,B,C”,[“bacground-color:green;”,“bacground-color:red;”,“bacground-color:blue;”]);
Hello,
I change the dhtmlxgrid.css file by adding caracteristic properties but it don’t work ,my footers take the yellow color even i choice th bleu color ?
this my class css :
div.gridbox_light div.ftr td {
background-color:#B0C4DE;
}
but should i add something for doing this?
best regards
Which skin are you using ? the class name is
div.gridbox_[skin name here] div.ftr td {
the
div.gridbox_light div.ftr td {
rule will work for “light” skin, if you are using “modern” skin for example, the css rule must be
div.gridbox_modern div.ftr td {
same for other skins
i’am using a light skin as and i declare this
div.gridbox_light div.ftr td {
background-color:#B0C4DE;
}
in my dhtmlXgrid.css
but my footers werr shawn in a yellow color --> so my css class deosen’t be identified
and see the construction of my grid :
<jsp:directive.page import=“com.tutelec.bl.constants.GniScreenItem”/>
<div align=“center”>
<div id=“messanger”> </div>
<div id=“gridboxDepenses” width=“100%” height=“300px” style=“background-color:white;overflow:hidden;”></div>
<br/>
<div id=“recinfoAreaDepenses”></div>
<br/>
<div align=“center”><span id=“recfoundTuDepenses”></span></div>
<script type=“text/javascript”>
function eXcell_edncl(cell){
this.base = eXcell_edn;
this.base(cell)
this.setValue = function(val){
if(!val || val.toString()._dhx_trim()=="")
val=“0”
if(val>=0)
this.cell.style.color = “green”;
else
this.cell.style.color = “red”;
this.cell.innerHTML = this.grid._aplNF(val,this.cell._cellIndex);
}
}
eXcell_edncl.prototype = new eXcell_edn;
//extended simple editor (with number format support) to be readonly
function eXcell_ednro(cell){
this.base = eXcell_edn;
this.base(cell)
this.edit = function(){
return false;
}
this.detach = function(){
return false;
}
}
eXcell_ednro.prototype = new eXcell_edn;
showMessage = function( msg ){
var msger = document.getElementById( “messanger” );
msger.innerHTML = msg;
}
var mygridDepenses = new dhtmlXGridObject( ‘gridboxDepenses’ );
var mygridHeadersDepenses = “Code comptable, Libellé, Libellé Utilisateur,JAN, FEV, MAR, AVR, MAI, JUN, JUI,AOU, SEP, OCT, NOV, DEC, Totaux” ;
var mygridSerializableColumnsDepenses = “true,true,true,true,true,true,true,true,true,true,true,true,true,true,true,true,true”;
mygridDepenses.setImagePath( “…/html/img/dhtmlxGrid/” );
mygridDepenses.chNoState = “false”;
mygridDepenses.setSkin( “light” );
mygridDepenses.enableLightMouseNavigation( false );
mygridDepenses.setHeader( mygridHeadersDepenses );
mygridDepenses.enableCSVHeader(true);
mygridDepenses.setSizes();
mygridDepenses.setInitWidths(“100,100,100,100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100”);
mygridDepenses.setColTypes(“ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro”);
mygridDepenses.setSerializableColumns( mygridSerializableColumnsDepenses );
mygridDepenses.setColSorting(“str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,int” );
mygridDepenses.enableMultiselect( true );
mygridDepenses.enablePagingWT(true, 10, 3, “recinfoAreaDepenses”);
mygridDepenses.setColAlign(“center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center”);
//Footers
//mygridDepenses.attachFooter(“Test”,[“bacground-color:green;”]);
mygridDepenses.attachFooter("Total Dépenses,#cspan,#cspan, , , , , , , , , , , , , ");
mygridDepenses.attachFooter("Réalisé,#cspan,#cspan, , , , , , , , , , , , , ");
mygridDepenses.attachFooter("Ecart,#cspan,#cspan, , , , , , , , , , , , , ");
mygridDepenses.attachFooter("Bilan mensuel,#cspan,#cspan, , , , , , , , , , , , , ");
mygridDepenses.attachFooter("Bilan Cumulé,#cspan,#cspan, , , , , , , , , , , , , ");
mygridDepenses.init();
myDataProcessorDepenses = new dataProcessor() ;
myDataProcessorDepenses.setUpdateMode(“off”);
myDataProcessorDepenses.init( mygridDepenses );
fill_grid = function(){
dojo.debug('fill_grid() :: START ');
showLoadingTuRemboursements();
var kw = {
url : ‘tuTuBudgetAnnuelDepenses.tdojo’,
sync : true,
content : { inline: “yes”, action: “select” },
formNode: dojo.byId(‘tuBudgetAnnuelForm’),
load : function(evt, json) {
//dojo.debug( “Search Result = " + json );
if (json == “<?xml version=\"1.0\" encoding=\"UTF-8\"?>” ){
mygridDepenses.clearAll();
showMessage(“Aucun enregistrement trouvé.”);
}
else{
showMessage(”");
hideSearchProgressDialog();
mygridDepenses.clearAll();
mygridDepenses.loadXMLString(json);
}
}
};
dojo.debug('fill_grid() :: bind ');
dojo.io.bind(kw);
dojo.debug('fill_grid() :: END ');
}
</script>
</div>
thanks for any help