Hi,
I have been trying to pick a datatable widget for a project I plan to work on soon. During this prelimary phase, I’ve already checked YUI datatable and Dojo’s Dijit grid.
With dhtmlx grid, the problem I encounter is a cumulative offset through columns: within a column, the header and cells left and right lines do not align properly: only the first column’s left line is a straight line. A screen capture is available at img296.imageshack.us/img296/4772 … blequ9.png
It seems like there is a 2 pixel value that gets substracted from header width to have the cells width, and this happens for each column. In the end, the total width on a cell line is always lower than the headers line width.
I would really appreciate any clue or idea to solve this problem.
Here is the last section of my grid creation function; is there something I am doing wrong ?
mygrid.setHeader(headers);
mygrid.setInitWidthsP(widths);
mygrid.setColSorting(ColSorting);
mygrid.setColTypes(ColTypes);
mygrid.setColAlign(ColAlign);
// set skin
mygrid.setSkin(“light”);
var url = ViewDataGrid_dhtmlx.dataGrid_buildUrl(KBdatagid);
// set dataGrid to load datas on scroll
mygrid.setXMLAutoLoading(url);
mygrid.init();
mygrid.enableAlterCss(“ev_light”,“odd_light”);
mygrid.loadXML(url);
mygrid.dataUrl=url;
// add filter Actions
ViewDataGrid_dhtmlx.dataGrid_addFilter(KBdatagid,mygrid);
mygrid.setSizes();
// bind dataGrid events to functions
mygrid.attachEvent(“onRowSelect”,RowActions_dhtmlx.onRowSelect);
mygrid.sortRowsOrg=mygrid.sortRows;
mygrid.sortRows= ColumnActions.sort;
// return full configured Dhtmlx DataGrid
return mygrid;
Thank you.
I would really appreciate any clue or idea to solve this problem.
The issue caused by css styles confilct, it seems that you are have some css rule which affect TH elements
To resolve such problem you can use next css rule on the page
div.gridbox table.obj th, div.gridbox table.hdr th{
padding:0px 0px 0px 0px ;
margin:0px 0px 0px 0px ;
}
It must reset any custom padding|margin, assigned through custom styles , for the columns of grid.
If issue still occurs for you - please provide any kind of sample where problem can be reconstructed ( you can send sample directly to support@dhtmlx.com )
Thank you so much! I just added the lines you provided at the end of dhtmlxgrid.css and it solved the problem. I can’t believe it was a css thing…
I have this same problem, as you can see in the attached image. However, it is only displaying incorrectly in IE. I tried the fix you mentioned here but it did not work. I commented out my one set of custom styles I’m using and the problem is still there, so I don’t think it is the custom styles I’ve added.
Do you have any other suggestions? I am building the header in the xml:
[code]
<?xml version='1.0' encoding='iso-8859-1'?> Homework #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan 1 9001256 Aquilar Adrian 2 9003265 Akioka Kaleo 3 9004587 Ali-Musa Shemsie [\code]
I found the cause, but still not sure of the fix. When I take out the #rspan the header and main grid cells aligns properly in IE. How to have a row span and ensure the grid aligns properly?
It seems that #cspan and #rspan will not work together. Is this a known bug in the grid? Is there a work around?
I HAVE A SAME PROBLEM
colspan and rowspan cannot be applied to one cell.
If issue still occurs for you - please provide any kind of sample or demo-link
Hi,
dhtmlx grid header is display fine in IE but it gets distrub in chorm and other browsers
attached is a preview
Please, provide any kind of sample of your code to reconstruct the issue.
following is the code
function searchCallBack(contents) {
try {
getObject(“gridboxContainer”).InnerHTML="";
getObject(“gridbox”).InnerHTML="";
mygrid = null;
mygrid = new dhtmlXGridObject(‘gridbox’);
mygrid.selMultiRows = true;
var dhtmlxSettingsnContent = contents.split(“▓”);
var header1 = dhtmlxSettingsnContent[0];
var header2 = dhtmlxSettingsnContent[1];
var XMLContent = dhtmlxSettingsnContent[2];
mygrid.imgURL = "../Toolkits/dhtmlX/dhtmlxGrid/codebase/imgs/csh_bluebooks/";
mygrid.setHeader(header1,null, [null, null, null, null,null, null, null, null,null, null, null, "background-color:#76B7EE;", null, null, null, null,null, null, null, null, "background-color:#76B7EE;", null, null, null, null,null, null, null, null, "background-color:#76B7EE;",null, null, null, null,null, null, null, null, "background-color:#76B7EE;"]);
mygrid.attachHeader(header2);
mygrid.setInitWidths("230,100,65,40,40,40,40,40,40,40,50,80,40,40,40,40,40,40,40,50,80,40,40,40,40,40,40,40,50,80,40,40,40,40,40,40,40,50,80");
mygrid.setColAlign("left,left,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center")
mygrid.setColTypes("tree,ed,ed,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn,edn");
mygrid.setStyle("padding-left:0px;color:#193e63", "border-width: 0px 1px 1px 0px;border-color:#d4d4d4;", "", "");
for (var i = 3; i < 39; i++) {
if (i == 11 || i == 20 || i == 29 || i == 38)
mygrid.setNumberFormat("0,000.00%", i);
else
mygrid.setNumberFormat("0,000.00", i);
}
mygrid.enableMultiselect(true);
mygrid._in_header_close_button = function (tag, index, data) {
tag.innerHTML = data[0] + "<span id='spn'>[-]</span>";
var grid = this;
var Week;
var Myindex;
tag.onclick = function () {
try {
var isColumnHidden = grid.isColumnHidden(index - 2);
if (isColumnHidden) {
grid.setColumnHidden(index - 2, false);
grid.setColumnHidden(index - 3, false);
grid.setColumnHidden(index - 4, false);
grid.setColumnHidden(index - 5, false);
grid.setColumnHidden(index - 6, false);
grid.setColumnHidden(index - 7, false);
grid.setColumnHidden(index - 8, false);
tag.innerHTML = data[0] + "<span id='spn'>[-]</span>";
}
else {
grid.setColumnHidden(index - 2, true);
grid.setColumnHidden(index - 3, true);
grid.setColumnHidden(index - 4, true);
grid.setColumnHidden(index - 5, true);
grid.setColumnHidden(index - 6, true);
grid.setColumnHidden(index - 7, true);
grid.setColumnHidden(index - 8, true);
Myindex = data[0].indexOf('[');
tag.innerHTML = data[0] + "<span id='spn'>[+]</span>";
}
}
catch (ex) { }
}
}
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.enableTooltips("true, true, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false");
mygrid.loadXMLString(XMLContent, function () {
window.setTimeout("setOnReady()",100);
});
setDirty80(false);
enableButton("search");
mygrid.attachEvent("onKeyPress", function (code, cFlag, sFlag) {
if (code >= 65 && code <= 90) {
try { window.event.cancel = true; window.event.returnValue = false; window.event.preventDefault() } catch (Error) { }
return false;
}
else
return true;
});
}
}
Unfortunately the issue still cannot be reconstructed.
Please, provide a complete demo where the issue can be reconstructed.
Here you can find a tutorial about creating a demo:
docs.dhtmlx.com/doku.php?id=othe … leted_demo
I found that the CSS delivered with Microsoft MVC 4.0 had the following line:
table{
border-collapse: collapse;
border-spacing: 0;
/margin-top: 0.75em;/
border: 0 none;
}
Commenting out the margin-top solved my alignment problem.