开发者

how to add a disclosure panel to a cellTable column in GWT

I have a cellTable with 5-6 columns. I want to put a p开发者_开发技巧lus icon in each row on clicking of which will display the details maybe in a disclosure panel. I have been looking around for a while now and I cannot find any information on how to achieve this. Could someone point me in the right direction?

i suspect i probably have to add a cellTree to the column? how do i go about this? Thank you for your response in advance.


There is work in progress to allow expandable rows in CellTable among other features (maybe GWT 2.3). You can see more details here:

http://groups.google.com/group/google-web-toolkit-contributors/browse_thread/thread/b4a8a6e3c98ac061#

If that is not enough or you can not wait untill it is released I can think of two ways to achieve it:

  • As you said, using a CellTree.
  • Creating a custom cell that stores state (open/close). Depending on the state the cell will render differently. In same way it is similar to how EditTextCell works, in "edit" state it renders an input field while in "normal" state it renders simple text.


I'm trying to do that too ... I managed to mimic that functionality toying with the html and a custom cell class that allows clickable pictures. It is working for normal content such as text but if you'd like to get an asynchronous data to show in the expended line, I don't know how to do it ... (I'm trying to do exactly that).

Also, it doesn't look good because the columns don't align well ...

So what I've done is: - create a custom cell class to display a picture (right pointing triangle, looking like the triangle in the disclosure panel)

  • In the click event get the HTML code of the selected row and copy it. Replace the content of the row (all cells) in the table with only one cell with its colspan set to number of columns. In the cell, add a table with first line the copied row and second line the content to display as expanded.

  • Get the image to sink an event for closing. In event, reset the original row that we copied.

I hope it helps.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜