[solved] Grid: Expanding rows (like in Excel, includes grid plugin) - Shuffle Newsletter May 2008 - polala.com

The issue is solved - please scroll down (http://extjs.com/forum/showthread.php?p=137582#post137582) to see the code and a screenshot!

------------------------------------------------------------------------

Hi,

please read carefully as this is hard to follow.

I have a grid which lists incoming orders and outgoing orders. Each incoming order can have one or more outgoing orders - which is typically a scenario where a Tree would work. Initially, all rows containing incoming orders should be visible, while all rows containing outgoing orders for a single incoming order item should be collapsed. This is similar to the column TreePanel example (http://extjs.com/deploy/dev/examples/tree/column-tree.html) where the task is the incoming order and the subtasks are the outgoing orders, but due to the huge amounts and the requirement to sort by columns, I need to use the grid because of sorting and paging.

I attached a mockup done in Excel to illustrate the problem. Important is that such a grid would work on a two-tier basis - a PagingToolbar would only page trough all records on the first tier (e.g. incoming orders) and that all second tier records are tied to their records on the first tier (outgoing orders). This means that when you have a PageSize of 20 records, and you have got 50 incoming orders with 5 outgoing orders each, you would have 3 pages (20,20,10 records on each page), no matter if the outgoing orders are collapsed or not. They simply don't count for the PagingToolbar.

Has somebody done something like this?

Regards,
Timo

Actually the example is something I created to strip down a more complex schema, but basically, no matter where the data is stored, each "incoming order" row contains a json array which itself contains all rows for the "outgoing orders".

I think that the server sided processing would work - but I'm not sure if that takes everything into account and makes it hard with paging, because I'm not sure how the PagingToolbar works (i.e. can the PagingToolbar be "fooled" about the actual amount of rows or does that confuse the grid and/or the PagingToolbar)?

Shuffle Newsletter May 2008::
Advanced photo editing in iPhoto includes the ability to problem solved. Microsoft Excel: Numbers (from the iWork suite) is a very decent
http://issuu.com/emiratesmac/docs/shuffle_newsletter_may_2008HOME

Orcmids Lair::
Social Computing: My Graphs over Our Grid? Microsoft ODF Interoperability Workshop In the pre-beta implementation, Excel drops any formulas based on different
http://orcmid.com/blog/lair.aspHOME

That's why I started analyzing how the grid and expander works, to build up a "clean" solution.

Regards,
Timo

The new version does not work. Error in firebug: "fn has no properties" on line 1317 in ext-all-debug.js.
if((v = fn.apply(scope obj, args)) !== undefined){ ...

The old version works without errors. I would debug this but for some reason Firebug is refusing to jump into Ext's source for me. So I cannot put break points or follow executing to try and figure out where the problem may be.

Please have a look at:

http://extjs.com/forum/showthread.php?p=142264#post142264

There's an updated version.

Regards,
Timo

Moved. If you actually added sub-grids, yes that would be a lot of overhead. I was more thinking that you could insert your own HTML tables, or some other kind of lightweight markup (assuming you don't need functionality like independent sorting, column resizing, etc. of the sub-groups). Really you can inject any kind of custom markup that you want. I would possibly approach it more like a custom DataView implementation for the row bodies rather than nested grids.

Not that I know of. This would probably be a better post for the general forums so that other people could potentially respond. You should be able to use the existing RowExpander example as a guideline for implementing something like this. You can use any kind of custom template you want for the row body, including a sub table for additional data.

Please ignore this message. The problem did turn out to be a cut and paste error on my part. Spent a few hours trying to figure that out. I would like to request that all plugins be distributed as file attachments to avoid this sort of problems.

Thanks for a great plugin BTW.

The new version does not work. Error in firebug: "fn has no properties" on line 1317 in ext-all-debug.js.
if((v = fn.apply(scope obj, args)) !== undefined){ ...

The old version works without errors. I would debug this but for some reason Firebug is refusing to jump into Ext's source for me. So I cannot put break points or follow executing to try and figure out where the problem may be.

You've basically already enumerated the pros and cons of both approaches yourself, and I think you understand the trade-offs. You can try using full nested grids and see how the performance is -- maybe it will be fine for your app. I can't think of a silver bullet for exactly what you want at the moment. Maybe someone else has already done something similar and will weigh in.

Please have a look at:

http://extjs.com/forum/showthread.php?p=142264#post142264

There's an updated version.

Regards,
Timo

I have a few questions, but first let's take paging out of the equation for a second as that should be relatively easy. more importantly, help me understand your data structure.

1) the only difference I can see between your example and a regular grid, is that there is an expander on each node that represents the root, or group. (in this case, the 'incoming' order)

2) where is the data stored? one table? I'd like to see the schema for the data you have in the preview.

If I'm not mistaken, it should look something like:

orders:
order_id
parent_id - default 0
item_name
order_date
delivery_date
counterparty
quantity
status

That being assumed, on the server side, I would build the response with these records as columns with one exception:
replace the item_name field with the parent's item_name unless parent_id = 0

At that point, you could just use a GroupingGrid to group by item_name.. throw some styling into the rows for your incoming versus outgoing..

Hi Timo,

Just looking over your solution and trying to implement it for my project, but i have a few questions (btw im a ExtJS and Javascript novice).

1. In the array reader object, I'm unsure about how the values specified map to the data, specifically:
{name: 'industry'},
{name: 'subdata'},
{name: 'desc'}
I can see how the other values match and are used but am unsure of these ones.

2. I don't quite understand the template HTML in the actual expander object. What needs to be specified here? To me it appears like a table with 1 row and just one cell, the company cell?
Shouldn't there be 5 cells specified representing the 5 values displayed?
Also does this value for td and div id (ext-gen249 & ext-gen248) matter or can they be anything as long as they are unique?
I also assume that for td class ie (class="x-grid3-col x-grid3-cell x-grid3-td-company") I would substitute company with whatever name i gave the header for that value?
I'm also guessing there needs to be a comma after the tpl definition and before the subdata definition.
With the subdata definition, I can see this points to the subdata object specified in the reader, but like I mentioned before I'm not sure what that points to.

I hope you or anyone can help a beginner with this soultion as my deadline is fast approaching and I really need to implement this.

Brian, can you move this thread?

Yes, I also thought about a sub-grid first, but isn't this a huge overhead since I would need e.g. 20 sub-grids?

*DRAFT* W3C Workshop on Web Applications and Compound Documents (Day 2 ::
Dynamic Rows. Attachments. Expanding Fields. Signatures. Questions. Micah Dubinko. Communicating Data The XFDL skin includes the ability to drop a JAR in
http://lists.w3.org/Archives/Public/public-webapps-cdf-discuss/20n/att-0004/2004jun02.htmlHOME

Regards,
Timo

Yes, but my customer said that he wants that the columns are in place, which would not be possible when using a lightweight HTML table, correct?

Additionally, I think that such collapsing rows are elegant because you can hide/show columns and this change is reflected in the sub-groups. I think I'll have a look and see if it is possible to implement that somehow.

Regards,
Timo

After quite a few hours learning the internal structure of the Ext Library, I came up with a solution which fits my needs. Everything is solved via the plugin interface and my grid plugin is an extension to the example RowExpander in the samples.

Notes:
- The data you read via the store needs to have a field where your sub-records are located in. These sub-records need to follow the record order you use in your main records.
- You need to pass the name of that field using the config field 'subdata'. If you don't specify a field name, it defaults to 'subdata'.
- All records are displayed in the expanded row as seen below in the screenshot. Right now, this is only a display plugin; it won't work with an EditorGrid.
- The plugin re-renders and re-builds the template whenever you hide or show columns and whenever you resize columns. Do not use this with a huge amount of columns! This plugin is meant to be used with a PagingToolbar. Feel free to implement caching yourself ;)
- You can see how the data for the subtable is stored in the example.

Here's the extension code:

Ext.grid.SubTableRowExpander = function(config){
if (!config.subdata) { config.subdata = 'subdata'; }
Ext.apply(this, config);

Ext.grid.SubTableRowExpander.superclass.constructo r.call(this);

this.state = {};
this.bodyContent = {};

};

Ext.extend(Ext.grid.SubTableRowExpander, Ext.grid.RowExpander, {
enableCaching: false,

init: function (grid) {

var ret = Ext.grid.SubTableRowExpander.superclass.init.call( this, grid);

this.grid.view.afterMethod('onColumnHiddenUpdated' , this.reconfigureTemplate, this);
this.grid.view.afterMethod('onLayout', this.reconfigureTemplate, this);
this.grid.view.afterMethod('onColumnWidthUpdated', this.doWidth, this);
this.grid.view.afterMethod('onAllColumnWidthsUpdat ed', this.doAllWidths, this);
this.grid.view.afterMethod('afterMove', this.doAllWidths, this);

},
doWidth: function () {
this.reconfigureTemplate();
this.updateRows();
},
updateRow: function (row) {
var record = this.grid.store.getAt(row);

if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}

var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);

var records = this.grid.store.reader.readRecords(record.data[this.subdata]);

records = this.processRenderMethod(records);

var content = this.tpl.apply(records.records);

this.bodyContent[record.id] = content;
body.innerHTML = content;
},
updateRows: function () {
var ns = this.grid.view.getRows();
for(var i = 0, len = ns.length; i < len; i++){
this.updateRow(i);
}
},
doAllWidths: function () {
this.reconfigureTemplate();
this.updateRows();
},
getActivatedGridColumns: function () {
var cm = this.grid.view.cm;

var cols = ;

for(var i = 0; i < cm.getColumnCount(); i++){
if (!cm.isHidden(i)) {
var col = {};
var name = cm.getDataIndex(i);
col.name = (typeof name == 'undefined' ? this.ds.fields.get(i).name : name);
col.index = i;
col.width = this.getColumnWidth(i);
col.renderer = cm.getRenderer(i);
cols.push(col);
}
}

return cols;
},
getColumnWidth : function(col){
var w = this.grid.view.cm.getColumnWidth(col);
if(typeof w == 'number'){
w = (Ext.isBorderBox ? w : (w-this.grid.view.borderWidth > 0 ? w-this.grid.view.borderWidth:0));
}

return w;
},

reconfigureTemplate: function () {
var cols = this.getActivatedGridColumns();

var template = [
'',
''
];

template.push('');

var padding, colWidth;

for(var i = 1; i < cols.length; i++){
if (i == 1) {
padding = 'padding-left: 10px;';
} else {
padding = '';
}

colWidth = cols[i].width;

template.push('