I have implemented treegrid and I noticed that the image icon of the tree cell is not vertically aligned with text and that there is not margin between the image and the text.
How can i manipulate the style of the tree cell? Should i change the source code or maybe there is some easy way to fix this?
10x in advance.
Unfortunately it is not available to customize the image position in the dhtmlxtreegrid. The only way is the inner code modification.
tell me what should i change inside the inner code because it looks ridiciously ugly with “web” skin.
Could you please, provide a complete demo with the example. The default web skin looks well in the treegrids without any style customizations.
I have attached a screenshot.
Here is the code:
[code]var geoPlacesGrid = ui.accordion.obj.cells(“places_binding”).attachGrid();
geoPlacesGrid.setSkin(defSkin);
geoPlacesGrid.setImagePath(gridImagePath);
geoPlacesGrid.setHeader(“Обект,Тип,”);
geoPlacesGrid.setInitWidths(“*,200,30”);
geoPlacesGrid.setColAlign(“left,left,center”);
geoPlacesGrid.setColTypes(“tree,ro,ch”);
geoPlacesGrid.setColSorting(“na,na,na”);
geoPlacesGrid.setStyle(“”,“border-width:1px 0px 1px 0px;font-size:11px;color:#46484D”,“”,“”);
geoPlacesGrid.init();
geoPlacesGrid.loadXML(“…/…/…/MarkedPlacesServlet?type=LOAD_MARKED_PLACES_GRID&client_id=” + selectedParentClient.client_id);
geoPlacesGrid.attachEvent(“onXLE”, function(){
});
geoPlacesGrid.attachEvent("onCheck", function(rId,cInd,state){
onCheckFunction(rId, cInd, state);
});
geoPlacesGrid.attachEvent("onRowSelect", function(rId, cInd){
if(cInd === 2) {
if(geoPlacesGrid.getCellExcellType(rId, cInd) === "img") {
geoPlacesGrid.setCellExcellType(rId, cInd,"ch");
geoPlacesGrid.cells(rId, cInd).setValue(1);
onCheckFunction(rId, cInd, true);
}
}
geoPlacesGrid.clearSelection();
if(geoPlacesGrid.getOpenState(rId) === false){ geoPlacesGrid.openItem(rId); }
else geoPlacesGrid.closeItem(rId);
});
var onCheckFunction = function(rId, cInd, state) {
var listOfChikdIds = [];
walkTreeGridChildItems(geoPlacesGrid, rId, listOfChikdIds);
for(var i=0; i<listOfChikdIds.length; i++) {
var nextId = listOfChikdIds[i];
if(geoPlacesGrid.getCellExcellType(nextId, cInd) === "img") {
geoPlacesGrid.setCellExcellType(nextId, cInd, "ch");
}
geoPlacesGrid.cells(nextId, cInd).setValue(state);
}
var listOfParentIds = [];
var parentId = geoPlacesGrid.getParentId(rId);
while(parentId !== 0) {
listOfParentIds.push(parentId);
parentId = geoPlacesGrid.getParentId(parentId);
}
for(var i=0; i<listOfParentIds.length; i++) {
var nextParentId = listOfParentIds[i];
//alert(nextParentId);
var childIds = geoPlacesGrid.getSubItems(nextParentId);
var splitArr = childIds.split(",");
var allChecked = true;
var allUncked = true;
for(var j=0; j<splitArr.length; j++) {
var nextChildId = splitArr[j];
if(geoPlacesGrid.getCellExcellType(nextChildId,cInd) === "img") {
allChecked = false;
allUncked = false;
break;
}
else {
var checkState = geoPlacesGrid.cells(nextChildId, cInd).getValue();
if(checkState === "1") {allUncked = false;}
else if(checkState === "0") {allChecked = false;}
}
}
if(allChecked) {
geoPlacesGrid.setCellExcellType(nextParentId, cInd, "ch");
geoPlacesGrid.cells(nextParentId, cInd).setValue(1);
}
if(allUncked) {
geoPlacesGrid.setCellExcellType(nextParentId, cInd, "ch");
geoPlacesGrid.cells(nextParentId, cInd).setValue(0);
}
if(allChecked === false && allUncked === false)
{
geoPlacesGrid.setCellExcellType(nextParentId, cInd, "img");
geoPlacesGrid.cells(nextParentId, cInd).setValue(gridImagePath + "/dhxtree_web/iconCheckGray.gif");
}
}
}; [/code]
so what should i change inside the core code to make it look more stylish?
???
Here is the view of the treegrid with the web skin.
In your case you have some customized css styles.
If the problem still occurs for you please, provide a complete demo, where the problem can be checked.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/tutorials__auxi … pport.html
Here you can find a skin builder tool for customizing the dhtmlx styles correctly:
dhtmlx.com/docs/products/skinBuilder/?fromMenu
I am not sure you understand my problem. I want to be able to adjust the space between the icon and the cell text. With the DEFAULT icon it looks OK but when i use my custom one it doent look OK!
Simply tell me what part of the js code should i change ot submit some update so users can adjust the spacing AS ALL OTHER LIBRARIES OUT THERE!!!
Hope i get reply soon because its been few weeks since i cant submit my project for something simple as putting some space between the icon and the text.
You already pointed that there is no inbuilt way to customise it so tell me where should i modify the js code to increse the padding and/or margin
Accordingly to your original problem:
the image icon of the tree cell is not vertically aligned with text and that there is not margin between the image and the text.
You may change the vertical align of the treegrid icon modifying the following css in the dhtmlxtreegrid.js:
_tgc.imsti="<img style=‘padding-top:2px;’ src=’"+(this.grid.iconURL||this.grid.iconTree);
replacing “padding-top:2px;” with the required padding.
Also you may add the “padding-right” property for the margin between the image and the text.
If any problem still occurs for you please, open a ticket at support.dhtmlx.com.
