Howto dynamically set grid column widths

[andreiastra]

Hi,

I need to adjust the grid column widths that the grid data strings are shown completely. In other words, every time when the grid store is updated, I need to set each column width to the longest data string within the column.

I have a function that does it. It gets the text metrics from the first grid row:



void setColumnWidths(){
TextMetrics metrics = TextMetrics.get();
Element rowElement = grid.getView().getRow(0);
....
}


I call the function in


store.addListener(Store.DataChanged, handleWidths);


which works fine, except the very first time when the data gets loaded, but the grid is not displayed yet. In that case, I get rowElement=null.

I tried to call the setColumnWidths() function for different events with no success. I tried

Events.Show, Attach, ViewReady, Refresh, Render, RowUpdated on grid and grid view listeners, but I was getting rowElement=null.

Is my general approach to the problem correct? What event should I handle when the grid is displayed for the first time, but it's grid.getView().getRow(0) is not null?

[sven]

which works fine, except the very first time when the data gets loaded, but the grid is not displayed yet. In that case, I get rowElement=null.

Yes as the grid wont be ready for the first time. Add a nullcheck for this.

Inside the ViewReady event, the grid should be ready and you should be able to get a row (if there are rows)

[andreiastra]

Hi Sven,

For the ViewReady event:



// Models are not empty
List models = grid.getStore().getModels();

// It's null
Element rowElement = grid.getView().getRow(0);


I can see that the models are not empty, but rowElement is null. How can it be?

[sven]

grid.addListener(Events.ViewReady, new Listener<GridEvent<Stock>>() {

public void handleEvent(GridEvent<Stock> be) {
assert grid.getView().getRow(0) != null;

}

});


I added this to the GridExample and it runs without any problems for me.

Can you please post a testcase that implements EntryPoint of your code?

[andreiastra]

Upon the ViewReady event, there is no data in the grid yet after all.

At the DataChanged event, the data is there, but it seems that the view is still empty(?).

Anyway, added one line in the code below, and it works fine now:



store.addListener(Store.DataChanged,
new Listener() {
public void handleEvent(StoreEvent be) {
// Added this line.
grid.getView().refresh(false);
setWidths();
}
});

[sven]

Ok,

your datachanged listener gets probably invoked before the grids datachanged listener gets invoked. So your setColumnWidths method acts on the old data.

Try this:


store.addListener(Store.DataChanged,
new Listener() {
public void handleEvent(StoreEvent be) {
// Added this line.
DeferredCommand.addCommand(new Command(){
public void execute(){
setWidths();
}

});

}
});

[andreiastra]

Yep, that does the job!

Thank you very much, Sven!

[sven]

No problem ;)

You can safe the DeferredCommand if you add your listener to the grid store after the grid added its listener.

Add an Events.Render listener to the grid and add the store listener (without deferrecommand) to the store inside this render listener.