Wijmo FlexGrid column width as header text Angluar2

Question

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

See Image .

How can I do it with CSS?

score 3 · Accepted Answer · answered Dec 20 '16 at 07:46

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.

Yeah, this works for me. In my version on wijmo, it was not supporting (loadedRows) so used auto size after assigning value — srashtisj, Dec 22 '16 at 02:30

score 0 · Answer 2 · answered Oct 05 '16 at 08:18

0

You can use text-overflow property and set it to ellipsis

Refer w3school

answered Oct 05 '16 at 08:18

Sudheer KB

1,596
14
28

i don't want (...), I want that whole text visible – srashtisj Oct 05 '16 at 08:25
Give width: auto!important; – Sudheer KB Oct 05 '16 at 08:27

score 0 · Answer 3 · answered Oct 13 '16 at 11:43

0

You should use AutoSize property of Flexgrid. Check this thread: http://wijmo.com/topic/auto-adjust-height-for-flexgrid-column-headers/

answered Oct 13 '16 at 11:43

AshishJindal

176
2
10

score 0 · Answer 4 · answered Mar 09 '18 at 16:39

I am working on HTML5/Angular JS 4 application using TypeScript. I need to wrap my column header. I simply did like below and it worked.

<wj-flex-grid #studentsWjFlexGrid [itemsSource]="studentsPerformanceData" style=" height:100%; width:100%">
    <wj-flex-grid-column binding="longDescription" [width]="100" [wordWrap]="true">
        <ng-template wjFlexGridCellTemplate cellType="ColumnHeader">
            <span style="word-wrap: break-word;">Long Description Goes here</span>
        </ng-template>
    </wj-flex-grid-column>
</wj-flex-grid>

Wijmo FlexGrid column width as header text Angluar2

4 Answers4