Posted 14 September 2017, 12:12 pm EST
Hi,
I am using wijmo5 angular2 component and I can’t get the vertical scroll bar to show up in my grid.
The grid is inside the div which is inside another div and so on. I get a scroll bar on my other div, but not on the grid itself. Is there a way to force the grid into a scrolling mode? Below is my html, I am using angular material2 components, not mdl.
<md-progress-bar *ngIf="loading == true" mode="indeterminate"></md-progress-bar> <div class="flex-container" fxLayout="column" fxLayout.xs="column" fxLayoutAlign="start none" fxLayoutAlign.xs="start"> <md-toolbar> <md-input-container floatPlaceholder="never"> <span mdPrefix style="margin-right:15px;">Trades from</span> <input mdInput [mdDatepicker]="from" [(ngModel)]="fromDate" style="width: 145px;"> <button md-icon-button mdSuffix (click)="from.opened ? from.close() : from.open()"> <md-icon>date_range</md-icon> </button> </md-input-container> <md-datepicker #from [startAt]="fromDate" (selectedChanged)="dateFromChanged($event)"></md-datepicker> <md-input-container floatPlaceholder="never"> <span mdPrefix style="margin-right:15px;">to</span> <input mdInput [mdDatepicker]="to" [(ngModel)]="toDate" style="width: 145px;"> <button md-icon-button mdSuffix (click)="to.opened ? to.close() : to.open()"> <md-icon>date_range</md-icon> </button> </md-input-container> <md-datepicker #to [startAt]="toDate" (selectedChanged)="dateToChanged($event)"></md-datepicker> <span class="toolbar-spacer"></span> <md-chip-list *ngIf="unlabeledCount > 0"> <md-chip color="accent" selected="true">{{unlabeledCount}} Trades left to label</md-chip> </md-chip-list> </md-toolbar> <md-card flex style="margin:5px;"> <realm-filter #filter width="300px" style="margin-left:15px;"> </realm-filter> <wj-group-panel [grid]="datagrid" [placeholder]="'Drag columns here to create Groups'" [maxGroups]="4" [hideGroupedColumns]="true"> </wj-group-panel> <wj-flex-grid #datagrid (initialized)="initialized(datagrid, e, filter)" [itemsSource]="tradesView" [wjContextMenu]="ctxMenu" (cellEditEnded)="editDone($event)" (updatedLayout)="layout($event)"> <!--wj-flex-grid-filter #filter></wj-flex-grid-filter--> <wj-flex-grid-column [header]="'Strategy'" [binding]="'StrategyName'" [isReadOnly]="true" [width]="100"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Side'" [binding]="'Direction'" [align]="'center'" [isReadOnly]="true" [width]="75"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Security'" [binding]="'SecurityName'" [isReadOnly]="true" [width]="275"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Trade Qty'" [binding]="'Quantity'" [isReadOnly]="true"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Trade Price'" [binding]="'TradePrice'" [isReadOnly]="true"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Label'" [binding]="'Label.LabelID'" [align]="'center'" [isReadOnly]="false" [width]="250"> <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell"> <wj-auto-complete #labelAutoComp [itemsSource]="labelsView" [placeholder]="'Start Typing..'" [selectedValuePath]="'LabelID'" [displayMemberPath]="'Label'" [(selectedValue)]="cell.value"> </wj-auto-complete> </ng-template> <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell"> {{cell.item.Label.Label}} </ng-template> <ng-template wjFlexGridCellTemplate [cellType]="'GroupHeader'" let-cell="cell"> Idea: {{cell.item.items[0].Label.Label}} ({{cell.item.items.length}} items) </ng-template> </wj-flex-grid-column> <wj-flex-grid-column [header]="'Seq'" [binding]="'Label.LabelSeqID'" [align]="'right'" [isReadOnly]="true" [width]="75"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Label Qty'" [binding]="'Label.LabeledQuantity'" [align]="'right'" [isReadOnly]="true"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Label Price'" [binding]="'Label.LabeledTradePrice'" [align]="'right'" [isReadOnly]="true"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Trade Date'" [binding]="'TradeDate'" [align]="'center'" [width]="'*'" [isReadOnly]="true" [format]="'d'"></wj-flex-grid-column> </wj-flex-grid> <div class="flex-item" fxLayoutAlign="end none"> <wj-collection-view-pager [cv]="tradesView"> </wj-collection-view-pager> </div> <wj-menu #ctxMenu (itemClicked)="assignLabel(datagrid.selectedRows, ctxMenu)" style="display:none;"> <wj-menu-item [value]="'Single'"> <md-icon style="vertical-align:text-bottom;margin-right:5px">link</md-icon>Assign Label</wj-menu-item> <wj-menu-item [value]="'Multi'"> <md-icon style="vertical-align:text-bottom;margin-right:5px">clear_all</md-icon>Assign Multiple Labels</wj-menu-item> <wj-menu-item [value]="'Delete'"> <md-icon style="vertical-align:text-bottom;margin-right:5px">delete_forever</md-icon>Delete Labels</wj-menu-item> </wj-menu> </md-card> </div>
