TreeGrid dynamic column width

[vnathank]

Hi,

I am using treegrid with one Field. I am adding nodes dynamically into the treegrid. My requirement is, treeGrid field has to adjust its width to show its contents, if the node data is larger than current column width.

If I do setAutoFitWidth(), it sets width as per the contents in the grid (default contents). Atleast if scroll bar is added, if content width is greater than current column width, it will be fine.

Is there any way to achieve this ?

[Isomorphic]

It sounds like you are looking for listGrid.autoFitData, which is inherited by TreeGrid.

[vnathank]

Hi
I am using tree grid Where I am adding nodes dynamically into the treegrid. TreeGrid field has to adjust its width to show its contents, if the node data is larger than current column width.
Below code i used
treeGrid.setAutoFitData(Autofit.HORIZONTAL) treeGrid.setAutoFitFieldWidths(true);

Now its working fine only for first level child node. For second level Child Node, Even i am giving node data larger than current width scroll bar does not coming.
Can you help me to do this.
Thanks in Advance

[vnathank]

Hi..
Iam waiting for above request.
Can you please update that.

[Isomorphic]

You said you were going to post code, but it looks like you forgot to.

The setting we recommended appears to work fine regardless of number of nodes and we can't help further until we can reproduce a problem.

[vnathank]

Hi..
please find below code

final VLayout treeVLayout = new VLayout();
treeVLayout.setWidth(250);
treeVLayout.setHeight("100%");
treeVLayout.setStyleName(CSSNames.LEFT_MARGIN);
treeVLayout.setOverflow(Overflow.AUTO);

treeGrid.setWidth100();
treeGrid.setHeight100();
treeGrid.setCellHeight(30);
treeGrid.setCanEdit(false);
treeGrid.setSelectionType(SelectionStyle.SINGLE);
treeGrid.setCanFreezeFields(false);
treeGrid.setShowRollOverCanvas(true);
treeGrid.setShowRollOver(true);
treeGrid.setShowSelectionCanvas(true);
treeGrid.setShowSelectionCanvas(true);
treeGrid.setShowEmptyMessage(true);
treeGrid.setEmptyMessage("Loading Groups...");
//treeGrid.setAutoFitData(Autofit.BOTH);
treeGrid.setAutoFitData(Autofit.HORIZONTAL);
treeGrid.setAutoFitFieldWidths(true);
treeGrid.setAutoFitFieldsFillViewport(true);
treeGrid.setAutoFitExpandField("GroupName");
treeGrid.setOverflow(Overflow.AUTO);
treeGrid.setAutoFitFieldWidths(true);

TreeGridField nameField = new TreeGridField("GroupName", "Group");
nameField.setWrap(false);
nameField.setFrozen(false);
nameField.setShowHover(true);
nameField.setHoverCustomizer(new HoverCustomizer() {

@Override
public String hoverHTML(Object value, ListGridRecord record,
int rowNum, int colNum) {

return record.getAttributeAsString("HintData");
}
});

treeGrid.setFields(nameField );

treeVLayout.addMember(treeGrid);
treeVLayout.setShowResizeBar(true);
return treeVLayout;

[Isomorphic]

You've got weird / conflicting settings here. autoFitData is going to expand the grid as a whole, so you won't have horizontal scrolling on the grid at all if you use this setting unless you also set autoFitMaxWidth. You should not be setting overflow on the grid at all; setting overflow on the layout won't be necessary once the grid is configured in a way that makes sense.

You also don't want to be enabling a rollover/selection Canvas. These don't support all modes of autofitting, and as configured they are useless anyway since you haven't configured their appearance.

[vnathank]

Thanks
Working fine

[vnathank]

Hi..
Dependent issue again.
Based on your above suggestion i got the scroll bar as i required.
Now if I drag the scroll bar it is coming to start position immediately.
My requirement is
When i drag the scroll bar to back only it has to come start position.

Thanks.

[Isomorphic]

Sorry, we don't understand what you mean. Can you show runnable code that can be used to reproduce the problem in a clean/unmodified SDK, and clear steps for exactly what actions you take with the mouse?

[vnathank]

HI,
Please find the below code.

final VLayout treeVLayout = new VLayout();
treeVLayout.setWidth(250);
treeVLayout.setHeight("100%");
treeVLayout.setStyleName(CSSNames.LEFT_MARGIN);
treeVLayout.setOverflow(Overflow.AUTO);
treeGrid.setWidth100();
treeGrid.setHeight100();
treeGrid.setCellHeight(30);
treeGrid.setCanEdit(false);
treeGrid.setSelectionType(SelectionStyle.SINGLE);
treeGrid.setCanFreezeFields(false);
treeGrid.setShowRollOverCanvas(true);
treeGrid.setShowRollOver(true);
treeGrid.setShowSelectionCanvas(true);
treeGrid.setShowSelectionCanvas(true);
treeGrid.setShowEmptyMessage(true);
treeGrid.setEmptyMessage("Loading Groups...");
treeGrid.setAutoFitFieldsFillViewport(true);
treeGrid.setAutoFitExpandField("GroupName");
treeGrid.setFixedFieldWidths(false);
treeGrid.setAutoFitMaxWidth(100);

TreeGridField nameField = new TreeGridField("GroupName", "Group");
nameField.setWrap(false);
nameField.setFrozen(false);
nameField.setShowHover(true);
nameField.setHoverCustomizer(new HoverCustomizer() {

@Override
public String hoverHTML(Object value, ListGridRecord record,
int rowNum, int colNum) {

return record.getAttributeAsString("HintData");
}
});

treeGrid.setFields(nameField);
treeVLayout.addMember(groupToolStack);
treeVLayout.addMember(treeGrid);

treeVLayout.setShowResizeBar(true);
return treeVLayout;

Now scroll bar is coming when node width greater than current column width.
If i drag that scroll bar from left to right, its immediately coming back to left even though iam not dragging to left.
What i want to do is if i drag the scroll bar from left to right and drop the scroll bar now scroll bar should be there at right side. when i drag the scroll bar to left only it has to come to left.
Thanks in advance.

[Isomorphic]

We can't run this code as is - it refers to variables (and constants) that are not included in the source (most obviously the treeGrid definition and data are missing).

We need a fully runnable example. If we flesh out this code with sample data and a sample TreeGrid definition we'll be guessing at your settings and it's very likely the bug won't manifest for us due to differences between our code and yours (a waste of everyone's time).


The best way to make this a runnable example would be either:

a) start with an existing example from the showcase and modify it with settings that mirror those in your application until it demonstrates the error, and then show us that code, or

b) create a new EntryPoint module with simple code that defines and draws all the components and data inline, making it runnable as a standalone class in a new project.
If your treeGrid is databound you can use a clientOnly dataSource to populate it with sample data (and include that dataSource definition along with the sample code you send us).

In short we'll need something we can just drop into a project and run on our end.

Thanks for your understanding

Isomorphic Software

[vnathank]

HI , Sorry for late replay

Here is the code ,
IN this code ,
if i made treeGrid.setShowHeader(false);
then only i can enable to drag scroll bar to the end of grid.
I want to make TreeGride Header as true.

-------------------------------------------

public class Testgwt3 implements EntryPoint {

public void onModuleLoad() {
createWindow();


}

public void createWindow(){
final Window Window = new com.smartgwt.client.widgets.Window();
Window.setWidth(600);
Window.setHeight(550);
Window.setTitle("testgrid");
Window.setShowMinimizeButton(false);
Window.setIsModal(true);
Window.setShowModalMask(true);
Window.centerInPage();


VLayout vLout=new VLayout();
vLout.setTop(25);
vLout.setWidth(200);
vLout.setHeight(500);
vLout.setBorder("1px solid gray");


TreeGrid treeGrid=new TreeGrid();
treeGrid.setWidth100();
treeGrid.setHeight100();
treeGrid.setShowHeader(false);
treeGrid.setLoadDataOnDemand(false);
treeGrid.setSelectionType(SelectionStyle.SINGLE);
treeGrid.setFixedFieldWidths(false);


Tree data = new Tree();
data.setModelType(TreeModelType.CHILDREN);

data.setRoot(
new TreeNode("root",
new TreeNode("File",
new TreeNode("FileChild")),
new TreeNode("Edit",
new TreeNode("EditChild",
new TreeNode("EditGrandChildddddddddddddddddddds"))),
new TreeNode("Windows"))
);

treeGrid.setData(data);


Window.show();
vLout.addChild(treeGrid);
Window.addChild(vLout);


}
}

-------------------------------

I want to display Header to my treegrid . is there any other way to display header Or as i am doing in wrong way.

and i am adding code as attachment file also please check once.
Thanks in advance.

[Isomorphic]

Ok this is starting to make sense. The attached code doesn't work because it uses "fixedFieldWidths" being set to false to allow the fields to expand to the width of their content.
This property will not work with a header (this is a known, documented limitation).

The right way to achieve this is with autoFitFieldWidths (or if you only care about one field, field.autoFitWidth).

While investigating this issue we ran into a couple of issues with these properties which we have now fixed so we'd recommend you pick up the next nightly build (3.1d branch, dated July 21 or greater) and then modify your code, removing the setFixedFieldWidths(true) line and replacing it with a call to setAutoFitFieldWidths(true), and if you want the grid as a whole to expand to fit the content rather than having a horizontal scrollbar show up, you can also set setAutoFitData(Autofit.HORIZONTAL).

		treeGrid.setAutoFitData(Autofit.HORIZONTAL);
		treeGrid.setAutoFitFieldWidths(true);

Please let us know if this doesn't get things working for you

Thanks
Isomorphic Software

[vnathank]

Its working in SmartGWT3.1d

Hi,

It works with SmartGWT 3.1d. Thanks for the fixes. Shall we know, when SmartGWT 3.1 final release ?

Thanks.