View Full Version : [SOLVED] Is there a way to do a nested grid or grid within a cell?

23 Feb 2012, 9:32 AM
In our legacy code grid, we have cells in a column that can have multiple lines of anchor tags with each link operating on the specific linked text (pop a dialog, navigate to a new page, whatever...).

The ClickableTextCell won't work here because it applies to an entire cell. What I'd like to be able to do is render a vertical list of clickable text cells in a single grid cell or a nested grid inside a single grid cell but don't see any way to do this.

Does anyone know how I might accomplish this or an example somewhere? Thanks.


23 Feb 2012, 9:48 AM
What I'd like to be able to do is render a vertical list of clickable text cells in

Wouldnt CompositeCell work for you?

23 Feb 2012, 10:09 AM
*looks sheepishly downward*


* - Aber, Ich weiss nicht das es war da.

23 Feb 2012, 10:58 AM
So, it's not exactly clear how I get the list of HasCell to the constructor.

I.e., if I have:

ColumnConfig<MyBean, MyBean> myCol =
new ColumnConfig<MyBean, MyBean>(new IdentityValueProvider<MyBean>(), 100, "My Col");
productCol.setCell(new CompositeCell<MyBean>(...));

MyBean has a getter that returns List<String> - I would need to create, say, a ClickableTextCell for each of these, add them to a list and get that list to the constructor (marked with the ellipsis above).

It's not at all clear how to create this. I'm using GXT's PropertyAccess interface to provide the values for the columns.

23 Feb 2012, 11:04 AM
HasCell is just an interface. You can simple create an "instance" from it and make it return your "inner" cell.

23 Feb 2012, 11:08 AM
Right, but the instances would need to each provide a corresponding value from the list of strings off of my bean. A list I don't have because we are dealing with the class type and not an instance type when we are defining the column config.

Is there a way you can provide a generic example, please? Thanks.

23 Feb 2012, 11:10 AM
I do not have an example, sorry.

Another solution would be to create a custom cell that takes a list of strings and renders them exactly has you require it.

23 Feb 2012, 11:25 AM
Ok. That's the road I started going down...a custom composite cell where my bean implements an interface that provides the list of strings.

It gets a little more tricky because each cell also needs to have a click handler so the custom composite cell also needs to take in a callback handler so each usage can specify what happens when a cell is clicked.

Thanks for the initial pointer.

24 Feb 2012, 9:04 AM
So, it turns out it isn't really possible to use CompositeCell in its current form with GXT. The problem is that the constructor for CompositeCell takes in a list of HasCell objects, which essentially is a list of objects that are to be rendered in the outer grid cell (for lack of a better term).

This list is not known at cell construction time - which is ultimately required when constructing a ColumnConfig and calling setCell(...). In fact, short of the getters, none of the model data is known at construction time - the contents of grid cells are delivered via the PropertyAccess interface methods.

I copied the CompositeCell class and took a chainsaw to it and managed to hack something together, but because I don't have the list of cells to render, I had to engineer some interfaces to allow for them to be provided. But since they aren't available at construction time, I have to generate them for each method called as part of rendering and/or event handling which is way overkill.

If each method uses the same list reference, then event handling will only retain knowledge of the last row in the grid. If each method regenerates the list each time, no events are fired because the initial list of cells is no longer able to be referenced.

I could add a map in the class to store a, say rowId, to cell list mapping but then it's not really a CompositeCell anymore, it's a CompositeCellListStoreContainer. I'm shelving this work because it was only a spike and isn't critical for my current scope of work. I will probably come back to it at some point to prove the map concept works - if however stinky.

Ultimately, I'd like to see GXT support a use for CompositeCell-like functionality or roll their own as GWT's version is not usable within GXT.

24 Feb 2012, 9:09 AM
I cannot really follow you why CompositeCell does not work together with GXT? I am using it in several places without any problem.

24 Feb 2012, 10:24 AM
Wait. So you do have an example?

I don't follow how it would work because the constructor for CompositeCell takes in a list of HasCell objects and if the value provider for a column comes from a PropertyAccess interface implementation there's no way to get a list of HasCell objects.

Unless....you had your bean define a setter that returns a list of HasCell objects which then tightly couples your POJOs to a UI framework and violates the separation of concerns.

A POJO needs to be completely and totally independent of any framework and should not be doing any business logic or providing the data in anything other than a standard way. It should not be massaging data for use in a UI.

24 Feb 2012, 12:12 PM
CompositeCell might not work for your custom usecase. However CompositeCell works very well with Grid and GXT.

If you require to render N objects and have them all clickable, why cannot you create a custom cell that just fits your needs?

24 Feb 2012, 1:06 PM
Fair enough.

I have a custom cell that renders the items. I have not been able to make them clickable using the API. Making them clickable in HTML, in the render method, would be easy but I don't want to have custom JavaScript calls - there's a term for this, but I can't remember it. I think it's four letters.

24 Feb 2012, 1:34 PM
I again cannot follow you. Why cannot you listen to the click event and check for the target in your custom cell? All cells work like this.

24 Feb 2012, 3:08 PM
I'm sorry I am not being clear.

Data for each row in my grid comes from GXTs PropertyAccess<T> interface. In my case, T is a bean that has a method that returns a list of M, i.e., another bean type. This list varies in length.

For the composite cell in question, I cannot simply render the list of M. I essentially need to construct a list of ClickableTextCell objects and render this list.

I construct my ColumnConfig via ColumnConfig<T, T>(new IdentityValueProvider<T>(), ....);

When I call setCell(new CompositeCell(...)), I need to pass in a list of HasCell objects and I don't know how to construct them because I don't have an instance of T, all I have is T itself. So, I can't get a list of M objects to be able to construct the list of HasCell objects and I can't think of a way to get them.

24 Feb 2012, 3:29 PM
In that case you need to have a Cell that acepts a list of T as value and can render it. You will need to have a custom cell for this.

Basicly its a CompositeCell that contains N ClickableTextCell's

30 Apr 2012, 7:17 AM
Just wanted to close this thread out. Colin pointed me to XTemplates (http://sencha.com/examples-dev/#ExamplePlace:templates). IMHO, they're incredibly powerful and WAY more easy to use than CompositeCell - which incidentally, I never was actually able to get working.

30 Apr 2012, 7:19 AM
For the composite cell in question, I cannot simply render the list of M. I essentially need to construct a list of ClickableTextCell objects and render this list.

A template would exactly do this.

A Tempalte just renders markup. You still need to have an own cell that makes different actions depening on where you clicked. The composite cell containing multiple clickable cells would not do anything else.

30 Apr 2012, 7:30 AM
Another note for others interested in this. If Xtemplate works for this, than you can also use any other cell that can render simpel markup and iterate over the list directly.

The problem with xtemplate/markup is that you need to make your logic for the click related to the target element on your own.

30 Apr 2012, 7:34 AM
Ahhhhh. Right. I left that bit out. In my custom cell, I check the event type in onBrowserEvent(...) and handle it appropriately based on what was clicked.

Since our use case doesn't require handlers, i.e., multiple listeners, I simply construct the cell with callback handlers for the pieces I want to listen to. It's not "technically" a composite cell as it's still just one table cell, but it IS far easier to work with since you don't have to have to have your HasCells up front like you do with CompositeCell.