DHTMLX

Start Building Professional
Web Apps Today

dhtmlxSuite 4.2
dhtmlxScheduler 4.3
dhtmlxVault 2.4
dhtmlxGantt 3.2
dhtmlxSuite 4.2

Categories

Question details Back To List

Question posted by Carmine Marino on Jul 09, 2008 09:44

open dhtmlx forum

grid control alignment issue.

I've been having some issues with column alignment in the grid control. I did some debugging and found the issue. If I have the grid control div tag within an element that specifies alignment, it throws off the alignment of the columns and footer in the grid.
I want to have the grid centered. See snipit below. See full example below that.

For example:

<table border="0" width="100%">
<tr>

<td align="center"> <-- this is causing the problem. If I take it off alignment is fine.

<div id="countSummaryGrid" width="480px" height="100px" style="background-color:white;"></div>
</td>
</tr>
</table>

Thank you,
Carmine Marino

Full Example below:

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

</head>

<body>

<link rel="STYLESHEET" type="text/css" href="scripts/AJAX/dhtmlxgrid/codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="scripts/AJAX/dhtmlxgrid/codebase/dhtmlxgrid_skins.css">
<link rel="STYLESHEET" type="text/css" href="scripts/AJAX/dhtmlxToolbar/codebase/dhtmlxtoolbar.css">

<script src="scripts/AJAX/dhtmlxgrid/codebase/dhtmlxcommon.js"></script>
<script src="scripts/AJAX/dhtmlxgrid/codebase/dhtmlxgrid.js"></script>
<script src="scripts/AJAX/dhtmlxgrid/codebase/dhtmlxgridcell.js"></script>
<script src="scripts/AJAX/dhtmlxgrid/codebase/ext/dhtmlxgrid_pgn.js"></script>
<script src="scripts/AJAX/dhtmlxgrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
<script src="scripts/AJAX/dhtmlxgrid/codebase/ext/dhtmlxgrid_nxml.js"></script>
<script src="scripts/AJAX/dhtmlxToolbar/codebase/dhtmlxprotobar.js"></script>
<script src="scripts/AJAX/dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
<style type="text/css">

</style>

<table border="0" width="100%">
    <tr>
        <td align="center">
            <div id="countSummaryGrid" width="480px" height="100px" style="background-color:white;"></div>
        </td>
    </tr>
</table>

<script language="JavaScript">
    var countSummaryGrid = new dhtmlXGridObject('countSummaryGrid');
    countSummaryGrid.setImagePath("scripts/AJAX/dhtmlxgrid/codebase/imgs/");
    countSummaryGrid.setHeader("Fund ,Membership Type ,Counts, Obligation");
    countSummaryGrid.setInitWidths("150,100,100,100");
    countSummaryGrid.setColAlign("left,left,right,right");
    countSummaryGrid.setColTypes("ro,ro,ro,price");
    countSummaryGrid.setColSorting("str,str,customAmountSort,customAmountSort");
    countSummaryGrid.enableAutoHeight(true,200);

    countSummaryGrid.init();
    countSummaryGrid.setSkin("NEA");
    countSummaryGrid.attachFooter("Total:,#cspan,#cspan,<div id='oblig_tot'>0.00</div>",["text-align:right;","text-align:right;"]);
    countSummaryGrid.setEditable(false);
    countSummaryGrid.loadXMLString("<?xml version='1.0' encoding='iso-8859-1'?><rows><row id='0' ><cell>NEA Dues</cell><cell>AC-1-1</cell><cell>0</cell><cell>0.00</cell></row><row id='1' ><cell>NEA Dues</cell><cell>AC-1-100</cell><cell>8,105</cell><cell>1,246,775.34</cell></row><row id='2' ><cell>NEA Dues</cell><cell>AC-1-25</cell><cell>0</cell><cell>0.00</cell></row><row id='3' ><cell>NEA Dues</cell><cell>AC-1-50</cell><cell>57</cell><cell>4,671.45</cell></row><row id='4' ><cell>NEA Dues</cell><cell>AC-2-100</cell><cell>2,046</cell><cell>180,481.49</cell></row><row id='5' ><cell>NEA Dues</cell><cell>AC-2-25</cell><cell>68</cell><cell>2,017.37</cell></row><row id='6' ><cell>NEA Dues</cell><cell>AC-2-50</cell><cell>244</cell><cell>12,254.52</cell></row><row id='7' ><cell>NEA Dues</cell><cell>AC-7-0</cell><cell>263</cell><cell>0.00</cell></row><row id='8' ><cell>NEA Dues</cell><cell>AC-7-100</cell><cell>6</cell><cell>0.00</cell></row><row id='9' ><cell>NEA Dues</cell><cell>FP-1-100</cell><cell>157</cell><cell>14,160.15</cell></row><row id='10' ><cell>NEA Dues</cell><cell>FP-1-50</cell><cell>6</cell><cell>278.76</cell></row><row id='11' ><cell>NEA Dues</cell><cell>FP-2-100</cell><cell>77</cell><cell>3,977.87</cell></row><row id='12' ><cell>NEA Dues</cell><cell>FP-2-25</cell><cell>8</cell><cell>135.68</cell></row><row id='13' ><cell>NEA Dues</cell><cell>FP-2-50</cell><cell>10</cell><cell>274.58</cell></row><row id='14' ><cell>NEA Dues</cell><cell>NM-0-0</cell><cell>129</cell><cell>0.00</cell></row><row id='15' ><cell>NEA Dues</cell><cell>RS-1-0</cell><cell>1</cell><cell>71.50</cell></row><row id='16' ><cell>NEA Dues</cell><cell>RS-2-0</cell><cell>1</cell><cell>39.00</cell></row><row id='17' ><cell>NEA Dues</cell><cell>RT-7-0</cell><cell>679</cell><cell>0.00</cell></row><row id='18' ><cell>NEA Dues</cell><cell>RT-7-7</cell><cell>38</cell><cell>7,000.00</cell></row><row id='19' ><cell>NEA Dues</cell><cell>RT-8-0</cell><cell>239</cell><cell>6,025.00</cell></row><row id='20' ><cell>NEA Dues</cell><cell>RT-9-0</cell><cell>48</cell><cell>0.00</cell></row><row id='21' ><cell>NEA Dues</cell><cell>RT-9-7</cell><cell>3</cell><cell>600.00</cell></row><row id='22' ><cell>NEA Dues</cell><cell>SF-0-0</cell><cell>23</cell><cell>1,635.57</cell></row><row id='23' ><cell>NEA Dues</cell><cell>ST-0-0</cell><cell>112</cell><cell>1,680.00</cell></row></rows>");

</script>

</body>
</html>

Answer posted by Support on Jul 10, 2008 01:39

Unfortunately the same sample works correctly when tested from our side ( please check attachment )
Most probably issue caused by used custom skin.

The align setting on external container must not affect content of grid, the settings for each column redefined by setColAlign command, the align of headers and footers defined by related css styles in dhtmlxgrid.css

Attachments (1)

1215679761.zip

89.37 Kb

Answer posted by Carmine Marino on Jul 30, 2008 02:53

The problem is with the Footer. The example you sent me that you said is working has the attachFooter line commented out. I believe you did this because the codebase you sent me was the demo version which doesn't include footers. When I use my codebase the footer is misaligned when using align=center in a table.

Can you replicate this?

Carmine Marino

Answer posted by Support on Jul 30, 2008 02:52

Sample with full version of dhtmlxgrid.js and enabled footer sent by email - there still no any misalignment.
The grid has text alignment defined in dhtmlxgrid.css for headers|footers, so any external align setting will be redefined.

You have next code
>>countSummaryGrid.setSkin("NEA");
probably the issue caused by some custom styles in your skin.
If issue still occurs for you - please provide used css file.

Answer posted by lidija on Sep 25, 2008 04:08

We have absolutely the same problem, no matter which skin is used for a grid!

Have you find the answer to this problem?!

Answer posted by Carmine Marino on Sep 25, 2008 06:06

The way I got around this issue was to do the centering via column widths rather than using the align attribute. See below

Hope this helps.

carmine