Search code examples
angularwijmoc1flexgrid

Wijmo FlexGrid column width as header text Angluar2


I want the full header text of the Wijmo FlexGrid header visible:

See Image.

How can I do it with CSS?


Solution

  • I was also facing the same issue while doing the same here is how i solved this:

    css changes:

    .wjcGrid .wj-colheaders   .wj-header {
        text-overflow: initial;
    }
    

    html changes:

     <wj-flex-grid  #flex 
        [itemsSource]="data" 
        [isReadOnly]="true" 
        [headersVisibility]="'Column'" 
        [selectionMode]="'Row'" 
        (loadedRows)="onGridLoaded($event)" 
        [autoSizeMode] = "'Headers'">
     </wj-flex-grid>
    

    In component:

      onGridLoaded(){
            var self = this;
            setTimeout(function() {
                 self.flex.autoSizeColumns();
            },300);
      }
    

    you can remove setTimeout from the above method,as i have used because i had some rendering issue when i was loading same grid multiple times.

    Hope it solves your issue.