PDA

View Full Version : Collapsible rows grid



kumar_Rajesh78
19 Jun 2014, 1:47 PM
Dear all,
I have a requirement where I have to create a grid with collapsible rows.
I have taken an example from the sencha documentation and it works fine. However, I need to have some of the columns non-collapsible while other collapsible.

Is it possible to implement, or if I think of other way of doing it , that would mean I can have one column of a normal grid work as a collapsible grid. In that case, the + sign would cause only that column to expand or collapse.
Here is the code sample that I took from Sencha website.



features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}',
hideGroupedHeader: true,
enableGroupingMenu: false
}],
columns: [{
text: 'Task',
flex: 1,
tdCls: 'task',
sortable: true,
dataIndex: 'description',
hideable: false,
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
}
}, {


Your advise is highly appeciated.

Thanks,
Rajesh

scottmartin
19 Jun 2014, 1:56 PM
You can have collapse row and halt this process, but not separate by individual columns in a row.

kumar_Rajesh78
19 Jun 2014, 2:45 PM
Thanks Scott,
But I did not understand the answer. Could you please explain more.
Also, what are my choices if I want to only expand and collapse 5 out of 10 columns.
Also is it possible to have another grid as one of the columns of parent Grid. And then I make the child grid collapsible.

Thanks,
Rajesh

scottmartin
19 Jun 2014, 2:53 PM
You can collapse rows, not individual columns in a row.

As for the embedded grid. You can add a grid under an entire row, but to place a grid is each cell, would it be better to add a simple html table? This would not solve your collapse issue per cell.

If you want a grid in a cell (would very slow to render), there is a UX that would allow you to place a component in a cell.

Scott.

kumar_Rajesh78
19 Jun 2014, 3:01 PM
Thanks for the answer Scott,
So what would be my best bet in your opinion.
Embed and HTML within a cell.?

kumar_Rajesh78
20 Jun 2014, 8:16 AM
Also, how would I get the grid under the entire row, as you mentioned about it in your last post.
I have not been able to figure this out yet.

scottmartin
20 Jun 2014, 8:18 AM
Here is a UX that can use:
https://github.com/mitchellsimoens/Ux.grid.plugin.AssociationRowExpander

Examples are included.

kumar_Rajesh78
20 Jun 2014, 10:17 AM
Hi Scott,
Thanks for the answer. Not sure if this will fit into my requirement exactly, but the information would be very useful in implementing what I need.

Really appreciate your help on this.

Thanks much,
Rajesh

kumar_Rajesh78
23 Jun 2014, 2:27 PM
Hi Scott,
I used the example in this reply. If I used it as is, it works fine.
But when I separate the Classes, like Company, History and move them out of Index.html, I get the grid,
But when I click on the + to expand, I get the following error.
I am struggling for 2 days to figure out whats going on.
Could you please help if possible.

Thanks,
Rajesh

scottmartin
23 Jun 2014, 2:46 PM
And the value of dataFn is?

kumar_Rajesh78
23 Jun 2014, 3:07 PM
its coming 'undefined' for me.
What I did is that, I moved my Models out of index.html and used the Application.js, viewport.js to load my classes.

kumar_Rajesh78
23 Jun 2014, 3:10 PM
One difference I observered between the two scenarios is that,
When I have everything defined in index.html,
the 'record' variable has a property called historyStore.
But when I have everything separated, this property is missing.

I am thinking this may be the reason.

kumar_Rajesh78
23 Jun 2014, 3:37 PM
Hi Scott,
I was able to find the problem.
What was happening is, when I was defining the Model class, I was not prefixing them with XXX.model.History,
rather I defined them as following. When I added the prefix, it worked fine.

Thanks for Looking into this.


hasMany : {
model : 'History',
name : 'history'
}

kumar_Rajesh78
6 Aug 2014, 1:15 PM
Dear team,
I have a question regarding collapsible grid.
Is it possible to change the title of the inner grid dynamically, based on the value of the one of the columns in the inner grid. Right now I am having hardcoded title for all my innder grids.

Thanks,
Rajesh