Posted 7 February 2020, 3:33 pm EST
Hi, im using angular and wijmo grid in angular, and boostrap, is there a way to hide de columns on width changes?
Wijmo Grid
Posted by: cesar.smerling on 7 February 2020, 3:33 pm EST
-
cesar.smerling
-
ashwin.saxena
Posted 9 February 2020, 11:27 pm EST
Hi Cesar,
You may hide a column of the FlexGrid by setting its visible property to false:
flexGrid.columns.getColumn('country').visible = false;But, we were unable to understand your requirement about hiding the column when the width changes. Could you please explain more about your use case so that we can assist you further?
Regards,
Ashwin -
cesar.smerling
Posted 10 February 2020, 8:45 am EST
Hi! I have a grid that is contained in a div that the width changes on some user iteractions. When the width shrinks I want that some of the columns will be hidden, I’m using for the columsn the '’ some cases has 1 other 0.5*.
Here is the grid code:<wj-flex-grid #flexBaselines class="scs-grid-list" style="border-top: 0!important;" [itemsSource]="itemSource" [headersVisibility]="'Column'" [selectionMode]="'Row'" [isReadOnly]="true" (initialized)="initSelector(flexBaselines)" (loadedRows)="loadedRows.emit($event)" (selectionChanged)="selectBaseline($event)"> <wj-flex-grid-column [header]="'lbl.Timestamp' | translate" [binding]="'timestamp'" [width]="'1*'"> <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item"> <span> <b>{{dateUtils.getTimestampAsLLL(item.timestamp)}}</b> </span> </ng-template> </wj-flex-grid-column> <wj-flex-grid-column [header]="'lbl.Identification' | translate" [binding]="'identification'" [width]="'1*'"> <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item"> <span>{{item.identification}}</span> </ng-template> </wj-flex-grid-column> <wj-flex-grid-column [header]="'lbl.Tag' | translate" [binding]="'tag'" [width]="'1*'"> <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item"> <span>{{item.tag ? item.tag : ''}}</span> <!-- <span class="font-weight-light">{{item.tag ? item.tag : ''}}</span><!––>--> </ng-template> </wj-flex-grid-column> <wj-flex-grid-column [header]="'lbl.Type' | translate" [binding]="'type'" [width]="'0.5*'"> <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item"> <i class="{{findBaselineType(item.type).icon}} mr-2"></i>{{item.type}} </ng-template> </wj-flex-grid-column> <wj-flex-grid-column [header]="'lbl.From' | translate" [binding]="'fromScenario'" [width]="'0.5*'"> <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item"> <div *ngIf="item.fromScenario"> <span class="badge badge-primary"> {{findScenario(scenarios, item.scenarioId).name}} </span> </div> <div *ngIf="!item.fromScenario"> <span class="badge badge-danger"> {{findFolder(folders, item.folderId).name}} </span> </div> </ng-template> </wj-flex-grid-column> <wj-flex-grid-column [width]="'0.3*'"> <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item"> <div ngbDropdown class="d-flex justify-content-center" container="body"> <button id="dropdownSelectorActions" ngbDropdownToggle class="btn btn-sm btn-light "> <i class="fas fa-ellipsis-h"></i> </button> <div ngbDropdownMenu aria-labelledby="dropdownSelectorActions"> <button ngbDropdownItem class="d-flex align-items-center" (click)="editClicked.emit(item)"> {{'btn.Edit' | translate}} <span class="d-flex flex-nowrap ml-auto"> <i class="fas fas fa-arrow-right"></i> </span> </button> <button ngbDropdownItem class="d-flex align-items-center" (click)="importClicked.emit(item)"> {{'btn.Import' | translate}} <span class="d-flex flex-nowrap ml-auto"> <i class="fas fas fa-file-download"></i> </span> </button> <button ngbDropdownItem class="d-flex align-items-center" (click)="exportClicked.emit(item)"> {{'btn.Export' | translate}} <span class="d-flex flex-nowrap ml-auto"> <i class="fas fas fa-file-upload"></i> </span> </button> <button ngbDropdownItem class="d-flex align-items-center" (click)="removeClicked.emit(item)"> {{'btn.Remove' | translate}} <span class="d-flex flex-nowrap ml-auto"> <i class="fas fas fa-trash text-danger"></i> </span> </button> </div> </div> </ng-template> </wj-flex-grid-column> </wj-flex-grid>I was wondering if there is some css class or the same width as '*'function that could help me to hide the columns. If not I have to react to the user iteractions and hide and show columns and add reactive screen size reaction too (I want to know if the grid can help me not to do that).
Thanks
PD: Sorry for the Post title.
-
ashwin.saxena
Posted 11 February 2020, 1:34 am EST
Hi Cesar,
As per our understanding, you wish to hide a few columns when the width of the FlexGrid is less than some value. Please refer to the demo link below that shows how you can change the layout of the FlexGrid for different screen widths:
https://www.grapecity.com/wijmo/demos/Grid/Responsive/angular
If you will reduce the window size, the FlexGrid will also change its layout.
Let us know if this helps.
~regards
-
cesar.smerling
Posted 13 February 2020, 8:19 am EST
Thanks, with the ```
this.flex.addEventListener(window, ‘resize’, this._updateGridLayout.bind(this)); -
ashwin.saxena
Posted 13 February 2020, 11:20 pm EST
Hi Cesar,
We are glad that you were able to resolve the issue.
~regards
