Start Building Professional
Web Apps Today

dhtml grid - paging toolbar skin

How can i skin the paging toolbar of my grid ?
In your example, the size of the <td> is 18px for the navigation buttons but i can't get this result.
this my code :
    mygrid.setPagingWTMode(true,true,true,true,["Results","Records from "," to ","Pag. "," Rows."]);
    mygrid.enablePagingWT(true,10,3,"recinfoArea");

How can i remove the null value in the pageSelect element and make the navigation buttons disabled when there's no rows in my grid.

Thanks for all.

Ben

The toolbar control is a dhtmlxtoolbar which can be accessed as
    grid.aToolBar....

            grid.aToolBar.disableItem("right");
            grid.aToolBar.disableItem("rightabs");
            grid.aToolBar.disableItem("left");
            grid.aToolBar.disableItem("leftabs");

            var select = grid.aToolBar.getItem("pages");
            select.removeOption("0");

>>>>How can i skin the paging toolbar of my grid ?
All aspect of skin defined in dhtmlxtoolbar.css

it's ok for the toolbar, but for the size of the buttons.
How do you put the width to 18px, this code is in the inline html, not in the css ?
The css class is the same for the button disabled and for the label => iconGray, so i can't change the size in the css.

The creation of toolbar described in dhtmlxgrid_pgn.js , lines 495-505

            this.aToolBar.addItem(new dhtmlXImageButtonObject(this.imgURL+'ar_left_abs.gif',18,18,f1,'leftabs',this._WTlabels[5]))
             ....
Values marked as bold - width and height of button

I am agree with you, i've really got tese lines in this file.
but the result  is :

<td width="5">
<div class="toolbarHandle"/>
</td>
<td class="toolbarName" style="display: none;">undefined</td>
<td class="iconGray" valign="middle" align="center" style="height: 100%;">
<img border="0" style="padding-left: 2px; padding-right: 2px;" title="To First Page" src="/iDTV3WebVOD/dhtmlx/dhtmlxGrid/codebase/imgs/ar_left_abs.gif"/>
</td>
<td class="iconGray" valign="middle" align="center" style="height: 100%;">
<img border="0" style="padding-left: 2px; padding-right: 2px;" title="Previous Page" src="/iDTV3WebVOD/dhtmlx/dhtmlxGrid/codebase/imgs/ar_left.gif"/>
</td>
<td class="iconGray" nowrap="" align="center" style="height: 100%;">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" title="Found Records">
</table>
</td>
<td class="iconGray" valign="middle" align="center" style="height: 100%;">
<img border="0" style="padding-left: 2px; padding-right: 2px;" title="Next Page" src="/iDTV3WebVOD/dhtmlx/dhtmlxGrid/codebase/imgs/ar_right.gif"/>
</td>
<td class="iconGray" valign="middle" align="center" style="height: 100%;">
<img border="0" style="padding-left: 2px; padding-right: 2px;" title="To Last Page" src="/iDTV3WebVOD/dhtmlx/dhtmlxGrid/codebase/imgs/ar_right_abs.gif"/>
</td>
<td class="toolbarNormalButton" align="center" style="height: 100%;">
<select class="toolbar_select" style="width: 100%;">
</select>
</td>
<td class="toolbarNormalButton" align="center" style="height: 100%;">
<select class="toolbar_select" style="width: 100%;">
</select>
</td>
<td/>
<td class="toolbarName" width="100%" align="right" style="display: none;">undefined</td>
<td/>

and in your example, you got :

<td width="5">
<div class="toolbarHandle"/>
</td>
<td class="toolbarName" style="display: none;">undefined</td>
<td class="iconGray" valign="middle" align="center" style="height: 100%; width: 18px;">
<img border="0" style="padding-left: 2px; padding-right: 2px;" title="To First Page" src="../../codebase/imgs/ar_left_abs.gif"/>
</td>
<td class="iconGray" valign="middle" align="center" style="height: 100%; width: 18px;">
<img border="0" style="padding-left: 2px; padding-right: 2px;" title="Previous Page" src="../../codebase/imgs/ar_left.gif"/>
</td>
<td class="iconGray" nowrap="" align="center" style="height: 100%; width: 150px;">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" title="Found Records">
</table>
</td>
<td class="defaultButton" valign="middle" align="center" style="height: 100%; width: 18px;">
<img border="0" style="padding-left: 2px; padding-right: 2px;" title="Next Page" src="../../codebase/imgs/ar_right.gif"/>
</td>
<td class="defaultButton" valign="middle" align="center" style="height: 100%; width: 18px;">
<img border="0" style="padding-left: 2px; padding-right: 2px;" title="To Last Page" src="../../codebase/imgs/ar_right_abs.gif"/>
</td>
<td class="toolbarNormalButton" align="center" style="width: 120px; height: 100%;">
<select class="toolbar_select" style="width: 100%;">
</select>
</td>
<td class="toolbarNormalButton" align="center" style="width: 120px; height: 100%;">
<select class="toolbar_select" style="width: 100%;">
</select>
</td>
<td/>
<td class="toolbarName" width="100%" align="right" style="display: none;">undefined</td>
<td/>

my code is :
<div>
    <div id="gridbox" style="width: 806px; height: 456px"></div>
    <div id="recinfoArea" style="width: 808px;"></div>
</div>

<script>
    var mygrid = new dhtmlXGridObject('gridbox');
    mygrid.attachHeader("#text_filter,#text_filter,,,");
    mygrid.setImagePath("<c:url value="/dhtmlx/dhtmlxGrid/codebase/imgs/"/>");
    mygrid.setPagingWTMode(true,true,true,true,["Results","Records from "," to ","Pag. "," Rows."]);
    mygrid.enablePagingWT(true,20,3,"recinfoArea");
    mygrid.setSkin("modern");
    mygrid.aToolBar.disableItem("right");
    mygrid.aToolBar.disableItem("rightabs");
    mygrid.aToolBar.disableItem("left");
    mygrid.aToolBar.disableItem("leftabs");
    mygrid.aToolBar.getItem("pages").removeOption("0");
    mygrid.init();
    mygrid.loadXML("<c:url value="/vodItems.do"/>");
    mygrid.makeFilter('publicId_box',0);
    mygrid.makeFilter('title_box',1);
</script>

Problem confirmed for strict doctype.
You can resolve issue by replacing
    dhtmlXImageButtonObject(this.imgURL+'ar_left_abs.gif',18,18
with
    dhtmlXImageButtonObject(this.imgURL+'ar_left_abs.gif',"18px","18px"
in dhtmlxgrid_pgn.js

If you need updated js file - please contact us directly at support@dhtmlx.com

ok it runs.
will it be replace in next release ?

Thanks for all

Yes, fix will be included in next build of dhtmlxgrid.