CODEWITHSUNDEEP
angularwijmoc1flexgrid
srashtisj
srashtisj

Reputation: 151

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?

Upvotes: 1

Views: 3059

Answers (4)

Ziggler
Ziggler

Reputation: 3500

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>

Upvotes: 0

piyush bageria
piyush bageria

Reputation: 61

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.

Upvotes: 3

AshishJindal
AshishJindal

Reputation: 176

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

Upvotes: 0

Sudheer KB
Sudheer KB

Reputation: 1606

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

Refer w3school

Upvotes: 0

Related Questions