Wijmo Grid

Posted by: cesar.smerling on 7 February 2020, 6:33 am EST

  • Posted 7 February 2020, 6:33 am EST

    Hi, im using angular and wijmo grid in angular, and boostrap, is there a way to hide de columns on width changes?
  • Replied 9 February 2020, 2: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
  • Replied 9 February 2020, 11:45 pm 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.
  • Replied 10 February 2020, 4:34 pm 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
  • Marked as Answer

    Replied 12 February 2020, 11:19 pm EST

    Thanks, with the
     this.flex.addEventListener(window, 'resize', this._updateGridLayout.bind(this));
    I could manage to hide the columns on resizing.
  • Replied 13 February 2020, 2:20 pm EST

    Hi Cesar,

    We are glad that you were able to resolve the issue.

    ~regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels