Forums Home / Wijmo / General Discussion
Posted by: akhabarov on 21 February 2020, 8:16 am EST
akhabarov
Posted 21 February 2020, 8:16 am EST - Updated 3 October 2022, 8:09 am EST
Hello,
I set grouping in grid, but on close group it keep initially size for the details grid. Can it be fixed?
Also there is extra margin after last row in details grid. I highlighted it in red.
One more question - if I close detailed grid using plus/minus icon and open it again, is it possible keep close/open status of the groups? Right now all group shown open in opening details grid.
akhabarov
Posted 21 February 2020, 8:29 am EST
One more question: is it possible do not display number of items in group?
sharad.tomer
Posted 24 February 2020, 12:10 am EST
Hi Andrei,
To autoFit the row height of the parent detail row when the group row of the nested grid is collapsed/expanded, we need to call the autoSizeRow() method on the parent grid after the group is collapsed/expanded. groupCollapsedChanged event could be used for this purpose.
API reference:
• groupCollapsedChanged event: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#groupcollapsedchanged
• autoSizeRow() method: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#autosizerow
if I close a detailed grid using plus/minus icon and open it again, is it possible keep close/open status of the groups?
To achieve the required functionality, we need to save the collapsed state of groups when the detail row is collapsed and then restore the collapsed state of groups when the details row is displayed again.
is it possible do not display number of items in group?
We could set the groupHeaderFormat to customize the group header. Please refer to the following doc for more info: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#groupheaderformat
Regards
Sharad
akhabarov
Posted 24 February 2020, 8:16 am EST
autoSizeRow does not work. I tried it for a specific row on both master and details grids. I also tried autoSizeRows() without parameters on both grids. It’s all doing nothing.
Any ideas what to check or try?
akhabarov
Posted 24 February 2020, 8:42 am EST
Below setup for grid and code onGroupCollapsedChanging
Now if I close group it still show empty space, but when I open group it resize to one row, completely opposite to expected!
Any ideas what’s going on? Maybe it somewhere in my styles? In demo on your website it collaps perfectly as expected and I see no use of autoSizeRow.
<wj-flex-grid #samplesFlex [autoGenerateColumns]=false [itemsSource]="data" (initialized)="initGrid(samplesFlex)" (pastingCell)="pastingFlex(samplesFlex, $event)" (copied)="copiedFlex(samplesFlex, $event)"> <wj-flex-grid-column *ngFor="let sampleColumn of sampleColumns" [header]="sampleColumn.header" [binding]="sampleColumn.binding" [width]="sampleColumn.width" [format]="sampleColumn.format" [visible]="sampleColumn.visible" [isReadOnly]="sampleColumn.isReadOnly"></wj-flex-grid-column> <ng-template wjFlexGridDetail let-item="item"> <wj-flex-grid #sampleDetailsFlex [itemsSource]="getProducts(item.uiId)" [headersVisibility]="'Column'" (pastingCell)="pastingFlex(sampleDetailsFlex, $event)" (copied)="copiedFlex(sampleDetailsFlex, $event)" (groupCollapsedChanging)="onGroupCollapsedChanging(samplesFlex, sampleDetailsFlex, $event)"> <wj-flex-grid-column *ngFor="let packageColumn of packageColumns" [header]="packageColumn.header" [binding]="packageColumn.binding" [width]="packageColumn.width" [format]="packageColumn.format" [visible]="packageColumn.visible" [isReadOnly]="packageColumn.isReadOnly"></wj-flex-grid-column> </wj-flex-grid> </ng-template> </wj-flex-grid> public onGroupCollapsedChanging(samplesFlex: WjFlexGrid, sampleDetailsFlex: WjFlexGrid, cellRange: CellRangeEventArgs) { sampleDetailsFlex.autoSizeRow(0); sampleDetailsFlex.autoSizeRow(1); sampleDetailsFlex.autoSizeRow(2); samplesFlex.autoSizeRow(0); samplesFlex.autoSizeRow(1); samplesFlex.autoSizeRow(2); }[img]https://gccontent.blob.core.windows.net/forum-uploads/file-a557c667-d968-4a0d-9993-7835cc8fb19e.jpg[/img]
ashwin.saxena
Posted 24 February 2020, 8:42 pm EST
Hi Andrei,
The reason for the issue is because you are calling the autoSizeRows method in the groupCollapsedChanging event. In this event, the group is not collapsed/expanded and it sizes the rows according to the original layout.
You can use the setTimeout callback in the groupCollapsedChanged event to automatically resize the rows.
You may refer to the sample below:
https://stackblitz.com/edit/angular-wsvidh
Regards,
Ashwin
akhabarov
Posted 25 February 2020, 7:56 am EST
It seems working in the way how you created details grid. Thanks.
akhabarov
Posted 27 February 2020, 7:52 am EST
I did as you suggested in the example, it works. But on close/open group it flashes quite noticeable. Is it possible to freeze grid update until row recalculated or somehow solve the issue?
ashwin.saxena
Posted 1 March 2020, 4:02 pm EST
Hi,
This is expected because when we auto-size the rows of the FlexGrid, it refreshes itself. That is why the flash occurs. We are sorry but there is no workaround for this.
~regards
akhabarov
Posted 3 March 2020, 4:31 am EST
One more issue: I want to disable selection inside details grid. Allow it only on Master grid.
I’m trying to use SelectionChanging event
gridChild.selectionChanged.addHandler((flexGrid, cellRangeEventArgs) => { this.onFlexPackageSelectionChanging(flexGrid, cellRangeEventArgs); }); public onFlexPackageSelectionChanging(samplesFlex: FlexGrid, cellRangeEventArgs: CellRangeEventArgs) { cellRangeEventArgs.cancel = true; }
But it’s doing nothing. You still can select any cell. I did the same on Master grid to limit columns which user can select. It works perfect, but in details grid it does not work.
I create details grid as in you example above, programmatically using createDetailCell, while Master grid coded in html of the component.
Can it be the reason? Is there a way to disable selection for details grid?
akhabarov
Posted 3 March 2020, 4:40 am EST
Never mind, solved I used SelectionMode, works perfect.
ashwin.saxena
Posted 3 March 2020, 2:19 pm EST
I am glad that you were able to resolve the issue.
~regards
