Start Building Professional
Web Apps Today

Table Header and Cell Alignment and Default Sort Image

Hi,

I was trying to populate the data retreive from the database and display it in the JSP using JSONArray. The data however is displayed but the the data doesn't aligned with the header. Also the default sort image is always displayed in the first field where it should be in the second field. Below is my code:

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/codebase/dhtmlxgrid_skins.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/codebase/dhtmlxtoolbar.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/codebase/dhtmlxtoolbar_xp.css">
<script language="javascript" src="${pageContext.request.contextPath}/codebase/dhtmlxcommon.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/codebase/dhtmlxgrid.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/codebase/dhtmlxgridcell.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/codebase/dhtmlxprotobar.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/codebase/dhtmlxtoolbar.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/codebase/ext/dhtmlxgrid_filter.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/codebase/ext/dhtmlxgrid_json.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/codebase/ext/dhtmlxgrid_mcol.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/codebase/ext/dhtmlxgrid_pgn.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/codebase/ext/dhtmlxgrid_srnd.js"></script>
<script language="JavaScript" src="${pageContext.request.contextPath}/scripts/prototype.js"></script>

    brandingTableGrid = new dhtmlXGridObject('brandingGrid');
    brandingTableGrid.setImagePath("${pageContext.request.contextPath}/codebase/imgs/");
    brandingTableGrid.setHeader(",Branding Name,Parent Group ID,Address,Days and Hours of Operation,Customer Service Phone Number,,,");
    brandingTableGrid.setColumnIds("sel,brandingName,groupId,address,daysHoursOfOperation,phoneNumber,edit,delete,audit");
    brandingTableGrid.setInitWidths("5,15,12,20,15,15,5,5,8");
    brandingTableGrid.cellWidthType = "%";
    brandingTableGrid.setColAlign("center,left,left,left,left,left,left,left,left");
    brandingTableGrid.enableTooltips("false,false,false,false,false,false,false,false,false");
    brandingTableGrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro");
    brandingTableGrid.setSkin("light");
    brandingTableGrid.setColSorting("na,str,str,str,str,str");
    brandingTableGrid.init();
    brandingTableGrid.parse(buildJSONData('${responseBean.brandingJson}'), 'json');
brandingTableGrid.setSizes();
brandingTableGrid.setSortImgState(true, brandingTableGrid.getColIndexById("Branding Name"), "asc");

Please help. Thanks in advance.

Jojit

>>the data doesn't aligned with the header
Problem can't be reconstructed, please check attached sample - it uses the same code and works correctly. 
Please be sure that you not using any global styles, which modify TD,TR,TABLE,DIV tags rendering. 

>>where it should be in the second field
You are mixing column header and column ID, the correct command will be

brandingTableGrid.setSortImgState(true, brandingTableGrid.getColIndexById("brandingName"), "asc"); // same as in setColumnIds