Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
151179 | Feb 3,2020 06:24 AM UTC | Feb 25,2020 01:30 PM UTC | Angular - EJ 2 | 5 |
![]() |
Tags: Grid |
[App.component.html]
<div class="control-section">
<ejs-grid [dataSource]='data' allowResizing= 'true'allowTextWrap='true' [textWrapSettings]='wrapSettings' height= '400'>
<e-columns>
. . .
<e-column field='CustomerName' headerText='Customer Name' [customAttributes]="{class: 'e-removewrap'}" minWidth='8' width='200'></e-column>
. . .
</ejs-grid>
</div>
|
[App.component.ts]
. . .
ngOnInit(): void {
this.wrapSettings = { wrapMode: 'Content' };
}
} |
[App.component.css]
.e-grid .e-rowcell.e-removewrap{
white-space: nowrap;
text-overflow: ellipsis;
}
|
[App.component.html]
<div class="control-section">
<ejs-grid [dataSource]='data' allowResizing= 'true'allowTextWrap='true' [textWrapSettings]='wrapSettings' height= '400'>
<e-columns>
. . .
</ejs-grid>
</div>
|
[App.component.ts]
. ..
export class AppComponent {
public data: Object[];
public wrapSettings: TextWrapSettingsModel;
ngOnInit(): void {
this.data = orderDetails;
this.wrapSettings = { wrapMode: 'Content' };
}
} |
App.component.css
.e-grid .e-headercell.e-removewrap{
white-space: nowrap;
text-overflow: ellipsis;
}
|
App.component.html
<ejs-grid [dataSource]='data' allowResizing= 'true'allowTextWrap='true' [textWrapSettings]='wrapSettings' height= '400'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' minWidth='80' width='200' maxWidth='300' textAlign='Right'></e-column>
<e-column field='OrderDate' headerText='Order Date' minWidth='80' maxWidth='200' width='200' format="yMd" textAlign='Right'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' minWidth='90' maxWidth='200' width='200'></e-column>
<e-column field='ShipName' headerText='Ship Name' minWidth='90' maxWidth='200' width='200'></e-column>
<e-column field='ShippedDate' headerText='Shipped Date' minWidth='90' maxWidth='200' width='200' format="yMd" textAlign='Right'></e-column>
<e-column field='ShipCity' headerText='Ship City' minWidth='90' maxWidth='200' width='200'></e-column>
</e-columns>
</ejs-grid> |
.e-grid .e-columnheader.e-wrap .e-headercell.e-removewrap .e-headercelldiv{
white-space: nowrap;
text-overflow: ellipsis;
color: red;
}
.e-grid .e-columnheader.e-wrap .e-headercelldiv {
overflow-wrap: inherit !important;
word-wrap: inherit !important;
}
|
<ejs-grid [dataSource]='data' allowResizing= 'true' allowTextWrap='true' [textWrapSettings]='wrapSettings' height= '400'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='200' textAlign='Right'></e-column>
<e-column field='OrderDate' [customAttributes]="{class: 'e-removewrap'}" headerText='Order Date' width='200' format="yMd" textAlign='Right'></e-column>
. . . .
</e-columns>
</ejs-grid>
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.