Collapsing Group Rows Issue

[tailchaser]

Greetings,

I am trying to find a way to have all group grid rows collapse upon load....AND adjust the column widths to fit the data.

When I set the gridModel option "collapsed" to true, the columns are minimized to fit only the header cell content. When expanding the grouped rows, the data of course is pretty much useless and all scrunched up.

Setting that option to false results in everything being expanded, but everything looks great.

I have tried to collapse the grouped rows on all the events I could find in the API including load, create, and render. In all of those cases, the grouped rows do not finish before those events are fired. So, I cannot find a way to collapse those rows once the grid is truly finished rendering when a groupModel is used.

Any tips or tricks? And for reference, I am using remote data.

Sincerely,
Steve

[paramvir]

That's interesting use case..

It could be done with setTimeout in the load event but there is a better solution.

Code: [Select]

load: function (evt, ui) {
this.one("refresh", function(){
this.flex(); //it would set the column widths in the expanded state.
var collapsed = groupModel.collapsed;
for(var i = 0; i < collapsed.length; i++){
collapsed[ i ] = true;
}
this.refreshView();
});
},

There is no need to use flex: {one: true} in the main constructor object when you use the above code in load event.

This code is for use in the latest version 3.2.0 where 'this' variable points to widget instance inside events, you would need to make appropriate change for old versions in which 'this' variable points to DOM element of the grid inside the events.

[tailchaser]

That code snippet worked really well in the demo at http://paramquery.com/pro/demos/group_rows. However, when plugged into my test code, I get a javascript error:
 
Object doesn't support property or method 'one'

It complains about this line of code: this.one("refresh", function().  I get the same error for the other "this.foobar" lines as well.

After alot of debugging, I discovered that on line 98 of the demo above uses this to create the grid: var grid = pq.grid("#grid_group_rows", obj); . The problem here is I try to use that same line of code and I get a javascript error that "pq" is undefined. The documentation at http://paramquery.com/pro/tutorial#topic-firstgrid says that I can use that optionally. I'm abit confused. 

Now, it gets even more interesting. on line 98 of the demo, I change that line to  var grid = $("#grid_group_rows").pqGrid( obj ); and run it. The demo doesn't work and indicates that there are no rows to display.

I noticed that using the "pq.grid" code on that demo, I briefly see the same display before it renders the rows and groupings. So, I suspect that something is happening prior to the grouping process.

I created a jsfiddle page to test this out and get the same results including not being able to use "pq.grid". http://jsfiddle.net/a49tds2b/3/ Interestingly on the jsfiddle example, "load" never fires.....only "create"/

I am presenting this awesome product on Monday/Tuesday for my company as a candidate to replace another grid product. We use grouped grids in quite a few places and require the initial load to have all rows collapsed as well as the column widths dynamically adjusted for the data fed into them. As I said, the code snippet you provided works great in the demo. I am hoping for a workaround or a fix to get this working before then. 

Regards,
Steve

[tailchaser]

I am not real clear when you say:

This code is for use in the latest version 3.2.0 where 'this' variable points to widget instance inside events, you would need to make appropriate change for old versions in which 'this' variable points to DOM element of the grid inside the events.

I tried this in the "load" event per your previous code snippet and the alert never fires (but the load event does fire as I tested. And, there are no JS errors for widget.one()):

Code: [Select]

var widget = $("#" + paramQueryGridId).pqGrid( "widget" );
widget.one("refresh", function(){
     alert(120);
     widget.flex();
     var collapsed = groupModel.collapsed;
     for(var i=0;i<collapsed.length;i++){
           collapsed[i]=true;
     }
     widget.refreshView();
});

I could use a code example of "pointing to the DOM element of the grid inside the events". I'm confused. If the target div is "myTargetGrid", do I point at that inside the load event like this?

Code: [Select]

load:function(evt, ui) {
     $("#myTargetGrid").one("refresh", function() {
          .....
     }
}

I tried that and it too doesn't work.

I am using the evaluation copy, so I am not sure which version that is. I assumed it was 3.2.x. The demos I am running on the website are "Demos 3.x". In the jsfiddle link I posted previously, I looked at the paramquery javascript being used and it is v2.4.1.

Given that I get an error complaining about the use of "this" in the load event function, I am not sure which version I am actually using for evaluation.

   

[paramvir]

Yours is probably v3.1.0. The equivalent code in that version would be:

Code: [Select]

load: function (evt, ui) {
                                var $grid = $(this);
$grid.one("pqgridrefresh", function(){
                                        alert( 'refresh fired' );
$grid.pqGrid( 'flex' ); //it would set the column widths in the expanded state.
var collapsed = groupModel.collapsed;
for(var i = 0; i < collapsed.length; i++){
collapsed[ i ] = true;
}
$grid.pqGrid( 'refreshView' );
});
},


I haven't executed it with v3.1.0, if you face any issue with it, please let know.

[tailchaser]

That worked!!!! 

Thank you so much!

Regards,
Steve