Grouping in

Hi,

I use the JQGrid from JQWidgetBox and I like it.
But now I try to use grouping and it does not work.

I reduced my problem to one single method to post it here.
I would be happy if someone could give me a hint what is wrong in my code.

Description what I want: http://www.trirand.com/blog/jqgrid/jqgrid.html
Click on "Grouping" (left side) and then on Remote Data (sorted).
I want my data to be grouped, but it does not work.

Load JQWidgetBox:
Gofer new
                url: 'http://ss3.gemstone.com/ss/JQueryWidgetBox';
                package: 'ConfigurationOfJQueryWidgetBox';
  package: 'JQWidgetBox-JQGrid-Core';
                package: 'JQWidgetBox-JQGrid-Dev';
  load.

This is the demo code for my problem:

renderContentOn: html  
       
| theScript theStream |
theScript := html jQuery this grid
        sortname: 'left';
        sortorder: 'desc';
        columns:
                (JQGridColumns new
                        add: ((JQGridColumn id: 'left' label: 'left'  selector: [ :sel | sel rowObject left]) width: 111; yourself);
                        add: ((JQGridColumn id: 'right' label: 'right' selector: [ :sel | sel rowObject right]) width: 111; yourself);
                        add: ((JQGridColumn id: 'top' label: 'top' selector: [ :sel | sel rowObject top]) width: 111; yourself);
                        add: ((JQGridColumn id: 'bottom' label: 'bottom' selector: [ :sel | sel rowObject bottom]) width: 111; yourself);
                        yourself);
                searchCallback: [ :aSearchRequest :jqGridColumns | |theData theSortColumn |
                        theSortColumn := jqGridColumns columnForSearchRequest: aSearchRequest.
                        theData := (OrderedCollection
                                with: (JQGridRowContent new id: 1; rowObject: (Rectangle left: 1 right: 2 top: 3 bottom: 4))
                                with: (JQGridRowContent new id: 21; rowObject: (Rectangle left: 1 right: 2 top: 3 bottom: 4))
                                with: (JQGridRowContent new id: 1; rowObject: (Rectangle left: 21 right: 2 top: 3 bottom: 4))
                                with: (JQGridRowContent new id: 1; rowObject: (Rectangle left: 1 right: 2 top: 23 bottom: 4)) ) asSortedCollection: [ :a :b | (theSortColumn dataValueFor: a) <= (theSortColumn dataValueFor: b) xor: aSearchRequest isSortDescending ].
          JQGridSearchResponse new
          rowContents: (theData
                                                collect: [ :eachDomainObject |
                                                        JQGridRowContent new
                                                                id: eachDomainObject id;
                                                                rowObject: eachDomainObject ]) ];
                grouping: true.

        theScript
                optionAt: 'grouping' put: true;
                optionAt: 'groupingView' put: (Dictionary new
                                add: 'groupField' -> (OrderedCollection with: 'left');
                                add: 'groupColumnShow' -> (OrderedCollection with: true  );
                                add: 'groupText' -> (OrderedCollection with: '{0}' );
                                add: 'groupCollapse' -> false;
                                add: 'groupOrder' -> (OrderedCollection with: 'desc' );
                                add: 'groupSummary' -> (OrderedCollection with: true );
                                add: 'groupDataSorted' -> true;
                                yourself).
        html table
                 script: theScript;
                with: ''.

"This is only for debugging"
        theStream := WriteStream on: ''.
        theScript javascriptContentOn: theStream.
        theStream inspect