problem with dhtmlxToolbar init

Suite and Optimus Suite 5
#1

Hi, i’m new using dhtmlxToolbar, and i’m using dhtmlx.com/docs/products/dht … .html#code to the Initializing from XML, my paths is ok, mis files is ok, but no show nothing in the browser… please help me…my code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>tool bar</title>
<head>
        <script type="text/javascript" src="codebase/dhtmlxcommon.js"></script>
        <script type="text/javascript" src="codebase/dhtmlxtoolbar.js"></script>
        <link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxtoolbar_dhx_blue.css"></link>
</head>

<body>
<div style="height: 150px;"><div id="toolbarObj"></div></div>   



<script>
var toolbar;
function doOnLoad() {
    toolbar = new dhtmlXToolbarObject("toolbarObj");
    toolbar.setIconsPath("samples/common/imgs/");
    toolbar.loadXML("samples/common/dhxtoolbar.xml?etc="+new Date().getTime());
}				   
</script>
</body>
</html>

Thanks

Mike

#2

Hi,

function doOnLoad is not called. You may call it on body onload:

#3

thanks Alexandra, is perfct, now i need put a toolbar pagin in my grid but i can’t ,i try with docs.dhtmlx.com/doku.php?id=dhtmlxgrid:paging without results, maybe the information is incomplete. My code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ausencias Programadas</title>


<!-- scripts Toolbars-->
<script type="text/javascript" src="dhtmlxToolbar/dhtmlxToolbar/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="dhtmlxToolbar/dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>


<!-- scripts Panel de Opciones-->
<script src="../../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>


<!-- scripts grid-->
<script src="codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="codebase/dhtmlxgrid.js" type="text/javascript"></script>
<script src="codebase/dhtmlxgridcell.js" type="text/javascript"></script>
<script src="codebase/ext/dhtmlxgrid_filter.js" type="text/javascript"></script>
<script src="codebase/ext/dhtmlxgrid_group.js" type="text/javascript"></script>
<script src="codebase/ext/dhtmlxgrid_pgn.js" type="text/javascript"></script>


<!-- Estilos Grid-->
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css"> 
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid_pgn_bricks">

<!-- Estilos Panel-->
<link href="../../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<link href="../../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">

<!-- Estilos Toolbar-->
<link rel="stylesheet" type="text/css" href="dhtmlxToolbar/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css">


</head>
<body>


<!-- Contenedores-->


<!-- codigo scripts div -->


<table width="100%" border="0">
  <tr>
    <td valign="middle"><div><div id="toolbarObj"></div></div></td>
  </tr>
  <tr>
    <td align="center" valign="middle">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
          <div class="CollapsiblePanelTab" tabindex="1">Opciones de Filtrado</div>
        <div class="CollapsiblePanelContent">
        <div id="myfilter">
                  <p><font><font  size=2 face="Verdana, Geneva, sans-serif">Funcionario:</font></font> 
                    <select id='select_funci' type='text' style="width:auto" >
                    </select><font><font  size=2 face="Verdana, Geneva, sans-serif">Causa:</font></font> 
                     <select id='select_causa' type='text' style="width:auto" >
                    </select>
                     <font><font  size=2 face="Verdana, Geneva, sans-serif">Tipo:</font></font> 
                    <select id='select_tipo' type='text' style="width:auto" >
                    </select>
                  </p>
                  <p>&nbsp;</p>
        </div>   
        </div>
        </div>
      <div id="Accordion1" class="Accordion" tabindex="0"></div> 
            
    </td>
  </tr>
  <tr>
    <td>
       <div id="gridbox" style="height:400px; width:100%"></div>
   </td>
  </tr>
  <tr>
    <td>
            <table width="100%" border="0">
          <tr>
            <td align="right"><div id="pgControls" style="font-family: Verdana, Geneva, sans-serif;"></div></td>
            <td align="left"><div id="pgState" style="font-family: Verdana, Geneva, sans-serif;"></div></td>
          </tr>
          <tr>
            <td colspan="2" align="right"><div id="pagingArea"></div></td>
            </tr>
        </table>
    
    </td>
  </tr>
  <tr>
    
  </tr>
</table>
<script>
var toolbar;
function LoadToolBar() {
    toolbar = new dhtmlXToolbarObject("toolbarObj");
    toolbar.setIconsPath("dhtmlxToolbar/dhtmlxToolbar/samples/common/imgs/");
    toolbar.loadXML("dhxtoolbar.xml?"+new Date().getTime());
	toolbar.setSkin('dhx_skyblue');
}				   
</script>

<script>
//configuracion de grid
mygrid = new dhtmlXGridObject("gridbox");
mygrid.setImagePath("codebase/imgs/");
mygrid.setEditable(false);
mygrid.setSkin("light");
mygrid.setHeader(",Causa,Desde,Hasta,Tiempo Ausencia,Observacion,Tipo,Trabajadores Afectados (tipo grupal)");
mygrid.setInitWidths("0,*,*,*,*,*,*,*");
mygrid.setColumnColor(",,,,,,,,");
mygrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro");
mygrid.setColAlign("left,left,left,left,left,left,left,left");
mygrid.setColSorting("str,str,date,date,na,str,str,na");
mygrid.enableResizing("true,true,true,true,true,true,true,true");



// inicializacion de grid 
mygrid.init();


// carga de datos
//mygrid.loadXML("grid.xml");//load data

mygrid.load("grid.xml",function(){
      var myToolbar=mygrid.aToolBar;
   });


// filtros
mygrid.makeFilter("select_funci",0);
mygrid.makeFilter("select_causa",1);
mygrid.makeFilter("select_tipo",6);


//mygrid.groupBy(0);

mygrid.customGroupFormat=function(name,count){
       return name+"  -  Ausencias Programadas del Trabajador (" +count+ ")";
}

//mygrid.attachHeader("#select_filter,#select_filter,,,,,#numeric_filter");	


// sorting
mygrid.enableStableSorting(true);
mygrid.sortRows(1,"date","asc");    // sort by the sibling column

// otros

//mygrid.enablePaging(true,17,10,pgControls,true,pgState);
mygrid.setPagingWTMode(true,true,true,true);
mygrid.enablePaging(true,17,3,"pagingArea");
mygrid.setPagingSkin("toolbar","dhx_skyblue");


var Accordion1 = new Spry.Widget.Accordion("Accordion1");
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});

</script>

<body onload="LoadToolBar()">

</body>
</HTML>

when i’d should, adding the code for my toolbar pagin, please…

Thanks
best regards

Mike

#4

Please check the ready sample with the toolbar as paging bar (you may find it in the grid package):

dhtmlxGrid/samples/14_loading_big_datasets/10_pro_paging_wt.html

Paging should be defined before data loading:

[code]…
mygrid.setPagingWTMode(true,true,true,true);
mygrid.enablePaging(true,17,3,“pagingArea”);
mygrid.setPagingSkin(“toolbar”,“dhx_skyblue”);

mygrid.load(“grid.xml”,function(){
var myToolbar=mygrid.aToolBar;
});[/code]