Setting cssClass for wj-flex-grid-column

Setting cssClass for wj-flex-grid-column

Posted by: xvu1983 on 14 September 2017, 11:48 am EST

• 

  xvu1983

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:48 am EST

  Hi, I have searched the forum for a way to display multiple lines text within a cell for a specific column. The closest thread I found was this http://wijmo.com/topic/flexgrid-multiline-word-wrapping/

  I thought my solution of using cssClass might work but it doesn’t. Am I using it wrong?

  I have replaced the back ticks with single quotes so it would display correctly.

  @Component({
      selector: 'app-rules',
      template:
      '
      <wj-flex-grid #grid [itemsSource]="applicationRules" headersVisibility="Column" selectionMode="Row">
          <wj-flex-grid-column [header]="script" binding="script" width="1*"
              [isReadOnly]="true" cssClass="application-script">
          </wj-flex-grid-column>
      </wj-flex-grid>
      ',
      //language=CSS
      styles: [
          '
          :host >>> .application-script {
              white-space: pre;
              max-height: 100px;
              overflow: hidden;
              text-overflow: ellipsis;
          }
          '
      ]
  })

• 

  ccruzmx

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  ANy News regarding this Topic? Applying the Angular2 [class.xxx]= Attribute binding is not working either.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hello,
  
  In Angular 2, directive properties are written inside and values are assigned according to their type. The same holds true for FlexGrid.
  
  Please try the following code snippet for applying cssClass for a column and let me know if it works for you.

  @Component({
      selector: 'app-cmp',
   
      template:'
  <wj-flex-grid #grid [itemsSource]="data" [headersVisibility]="'Column'">
          <wj-flex-grid-column [header]="'script'" [binding]="'country'" [width]="100"
              [isReadOnly]="true" [cssClass]="'application-script'">
          </wj-flex-grid-column>
      </wj-flex-grid>',
      styles: ['
  :host >>> .application-script {
      white-space: pre;
      max-height: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  ']
   
  })

  In addition, since you are trying to show multiple line text within a cell for a specific column, you could display text in multiple line text by setting width for column and set wordWrap property to true and call autoSizeRows method to resizing rows according to their content.

  Please use following code snippet:

  import * as wjGrid from 'wijmo/wijmo.grid';
  @Component({
      selector: 'app-cmp',
      template: '
  <wj-flex-grid #grid [itemsSource]="data" [headersVisibility]="'Column'" (initialized)="init(grid)">
          <wj-flex-grid-column [header]="'script'" [binding]="'country'" [width]="100"
              [isReadOnly]="true"  [wordWrap]="true">
          </wj-flex-grid-column>
      </wj-flex-grid>'
  })
  export class AppCmp {
      protected dataSvc: DataSvc;
      data: wjcCore.CollectionView;
  
      constructor( @Inject(DataSvc) dataSvc: DataSvc) {
          this.dataSvc = dataSvc;
          this.data = new wjcCore.CollectionView(this.dataSvc.getData(100));// data service
      }
  
      init(s: wjGrid.FlexGrid) {
  
          s.autoSizeRows(0, s.rows.length - 1);
      }
     
  }

  Thanks,
  
  Manish Kumar Gupta

• 

  aaronm

  • Post Options:
  • Link
    Copy

  Posted 4 March 2019, 12:34 pm EST

  I have a similar requirement.
  
  Angular 6.1
  
  wijmo 5.20181.462

  I’d like to be able to create a css class in the app.component.css and assign that class to a column header’s [cssClass]

  app.compoent.css:

  .my-cell-header {
  
  width: 200px;
  
  color: green;
  
  }

  html:

  <wj-flex-grid #grid [itemsSource]=“data”>
  
  <wj-flex-grid-column [header]=“‘Country’” [binding]=“‘country’” [isReadOnly]=“true”
  
  [cssClass]=“‘my-cell-header’”>
  
  
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘RowHeader’” let-row=“row” let-item=“item”>
  
  {{row.index}}
  
  <span *ngIf=“item == grid.editableCollectionView.currentEditItem” class=“wj-glyph-pencil”>
  
  
  
  

  I know I can set the width like this [width]=“100” on the wj-flex-grid-column but I want the width applied by a class so I can resize based media queries.