PDA

View Full Version : TreeGrid displays column headers but not rows



timblack1
2 Mar 2010, 11:56 PM
My TreeGrid here (http://alwaysreformed.com/treegrid/) is displaying column headers but not rows. It also displays a vertical scrollbar. I can't figure out what is wrong with it--my best guess is that the JSON is not formatted correctly. What do I need to do to get this working?

Animal
3 Mar 2010, 12:06 AM
IIRC, you need to configure it with a Store like a grid.

timblack1
3 Mar 2010, 12:49 AM
IIRC, you need to configure it with a Store like a grid.

Doesn't the TreeLoader in TreeGridLoader.js create its own store? I think that's why lines 35-39 of TreeGrid.js read:


l = new Ext.ux.tree.TreeGridLoader({
dataUrl: this.dataUrl,
requestMethod: this.requestMethod,
store: this.store
});

Animal
3 Mar 2010, 1:36 AM
How does that create a Store?

wzylinski
3 Mar 2010, 3:51 AM
I had the same problem and it looks like you have to set the columns' width (you will also see your records if you resize the 1st column)

rastafarra
3 Mar 2010, 6:04 AM
IIRC, you need to configure it with a Store like a grid.

i didn't see store in the sample (http://www.extjs.com/deploy/dev/examples/treegrid/treegrid.html).

can you show another example?

timblack1
3 Mar 2010, 8:28 AM
How does that create a Store?

Thank you for your help! I don't know how it creates a store, nor am I sure it does, though I think somehow simply setting the dataUrl config option in the Ext.ux.tree.TreeGrid in tree-grid.js creates the store, using the TreeLoader, because the (unmodified) example here (http://alwaysreformed.com/treegrid/static/javascript/ext-3.1.1/examples/treegrid/treegrid.html) displays rows even though it doesn't explicitly create a store, and my treegrid is an only slightly modified copy of that example. I tried explicitly creating a store as a config option in tree-grid.js, but haven't gotten that to work yet.

wzylinski
3 Mar 2010, 8:32 AM
Mate, you don't need a store. The only reason you can't see your tree is because you didn't set the columns' width... Do it and it will display correctly. You can also see that it works fine if you try to resize the first column in your grid, like I did:

timblack1
3 Mar 2010, 8:52 AM
I had the same problem and it looks like you have to set the columns' width (you will also see your records if you resize the 1st column)

Excellent! Thank you, that worked. I took the column widths out in the hope the TreeGrid's columns would automatically resize to fit their contents--is it still possible to get them to do that?

I'm trying to understand the updateColumnWidths code in TreeGrid.js to see whether it requires hard-coded widths in the initial config, and that research is what kept me from replying to you more quickly.

wzylinski
3 Mar 2010, 8:54 AM
I was trying to make the columns auto expand with no success, so let me know if you manage to do it. Also, if you hide the column it will only hide it from rows, but not from the header

timblack1
3 Mar 2010, 9:26 AM
I was trying to make the columns auto expand with no success, so let me know if you manage to do it. Also, if you hide the column it will only hide it from rows, but not from the header

It looks like the width is currently hard-coded into the renderer in TreeGridNodeUI.js line 51. I tried removing the width declaration there but it didn't make the widths layout automatically. I'll take a look at the generated HTML to see if it can be modified to allow the browser to manage it as a normal table layout; if that is not possible we may have to figure out how to apply an ExtJS layout setting.

talha06
5 Apr 2011, 3:09 AM
Having exactly same problem with the owner of this post. I see the data from Firebug, but unfortunately I haven't seen any records on the grid. I'll be happy if someone can help me..

Thanx in advance..


var storeSmKonumlarTree = new Ext.data.JsonStore({
autoLoad : false,
url : '../rest/konumlar/getSmKonumlarTree.ajax',
pruneModifiedRecords: true,
restful : true,
fields : recordSmKonumlarTree,
totalProperty : 'totalCount',
root : 'data',
idProperty : 'konumId'
});

this.columns = [
{
header : 'KONUM ID ',
dataIndex: 'konumId',
hidden : true
},
{
header : 'ADI ',
dataIndex: 'adi',
width : 100
},
{
header : 'KODU ',
dataIndex: 'kodu',
width : 100
},
{
header : 'ÜLKE KODU ',
dataIndex: 'ulkeKodu',
width : 50
}
];
//});

this.requestMethod = 'GET';

this.loader = new Ext.ux.tree.TreeGridLoader({
dataUrl : '../rest/konumlar/getSmKonumlarTree.ajax',
requestMethod: this.requestMethod,
store: storeSmKonumlarTree
});