PDA

View Full Version : Ext.grid.EditorGridPanel Merge cells on different rows



mad_ady
14 Sep 2010, 12:43 AM
Hello,

I'd like to know if it is possible to merge a cell spanning on (let's say) 4 consecutive rows and show a read-only content in that cell. I'm thinking I can edit the renderer of that column and decide when I need to do this - the problem is - I don't know how to merge (or at least hide) the other cells.

What would be the best approach to achieving this? If it's not technically possible, what other GUI alternatives would you recommend to allow users to see information associated to some data (maybe a panel with a property grid?)?

The table I want to render should look something like this (pardon the ascii art):


----------|------------|
row 1 | |
----------| merged |
row 2 | |
----------| row |
row 3 | |
----------|------------|

Condor
14 Sep 2010, 1:14 AM
There are two possible solutions:
1. Fake row spanning (see here (http://www.sencha.com/forum/showthread.php?103133-GridPanel-row-spanning-(well-sort-of...))).
2. Use a different GridView (e.g. TableGridView) that could actually supports row spanning (TableGridView doesn't support this by default - you will need to rewrite the cell rendering for this).

mad_ady
14 Sep 2010, 2:40 AM
Thank you Condor, I will try your first example.

mad_ady
14 Sep 2010, 4:37 AM
Just for the record, the first solution worked beautifully when the cells had the same value. The only problem (cosmetic) is that if the row has a background color, you can still see the unmerged cells - but it's no biggie.

On question though - What happens when I try to edit the cell? I see I get only one editor. I guess I would be editing just one value. I know I first asked for a readonly cell merge, but I am curious... :)

mad_ady
14 Sep 2010, 4:42 AM
Correction - I can edit the cells, but the trick is you have to click the cell near the end of the input field in order to display that value, otherwise it enables just the first row's editor

Condor
14 Sep 2010, 6:11 AM
So you can still click on the cells that are covered by the first cell? That shouldn't be possible! Maybe the css isn't completely correct?

ps. If you would want to make it editable then you should only be able to edit the first cell and in the afteredit event you would have to set the new value to the other records that had the same old value.

mad_ady
14 Sep 2010, 9:54 PM
Yes, I can barely click near the rightmost edge of the cell and I get an editor. It's not an issue, and your suggestion for editing the first record and propagating the change is very good, thanks :)

cicts
20 Jun 2013, 11:59 PM
Hi condor,
i implemented ur logic of fake row spanning , worked like charm :)

but now there is requirement that two columns should have row spanning .

i tried out with the same logic in rendere of another column but was unsuccessful .. Can u plz help me out

attaching my screen shot




There are two possible solutions:
1. Fake row spanning (see here (http://www.sencha.com/forum/showthread.php?103133-GridPanel-row-spanning-(well-sort-of...))).
2. Use a different GridView (e.g. TableGridView) that could actually supports row spanning (TableGridView doesn't support this by default - you will need to rewrite the cell rendering for this).