Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by javaLover on Apr 02, 2008 04:49
open dhtmlx forum
Skin & color of footer's grid?

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.
Answer posted by Support on Apr 02, 2008 07:18
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;"]);
   
Answer posted by javaLover on Apr 02, 2008 10:04

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

Answer posted by Support on Apr 02, 2008 10:37
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
Answer posted by javaLover on Apr 02, 2008 11:26

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">&nbsp;</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\"?><rows ></rows>" ){

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