Disable allowTextWrap for a particular column

Neo

Asked On February 3, 2020 06:24 AM UTC

Hi all,

Query 1 :- I want to disable 'allowTextWrap' for a particular column. Couldn't find a property to set disable.

Query 2 :- How to persist header height when resizing along with text wrapping. Refer following screen shot. (Note - Excess text should hide)

Reply | Reply with quote

Prasanna Kumar Viswanathan [Syncfusion]

Replied On February 3, 2020 10:51 AM UTC

Hi Shamil,

Thanks for contacting Syncfusion support.

Query 1 :- I want to disable 'allowTextWrap' for a particular column. Couldn't find a property to set disable.

We do not have support to disable or enable 'allowTextWrap' for particular column. However you can achieve this requirement using custom attributes property of the Grid column. Please refer the below code example , sample, documentation link for more information. In the below sample we have disabled allowTextWrap particularly for CustomerName column.

[App.component.html]

<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;

}

Sample: https://stackblitz.com/edit/angular-f151179?file=app.component.ts

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/cell/#custom-attributes

Query 2 :- How to persist header height when resizing along with text wrapping. Refer following screen shot. (Note - Excess text should hide)

You can use wrapMode as ‘Content’ for this requirement. So that while text wrapping will be enabled only for the content, header height will be persisted and excess text will be hidden. Please refer the below code example, sample and documentation link for more information.

[App.component.html]

<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' };

}

Sample: https://stackblitz.com/edit/angular-f151179?file=app.component.ts

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/cell/#auto-wrap

Please get back to us, if you need further assistance.

Regards,

Prasanna Kumar N.S.V

Reply | Reply with quote

Neo

Replied On February 18, 2020 07:29 AM UTC

Hi Prasanna Kumar,

As per the solution you provided, there is a change to do. Actually I was expecting the text wrapping should be effected to the header text only. My requirement as below in detail,

Query 1

** Disable wrapping should be affected to the header text only **

this.textWrapSettings = { wrapMode: 'Header' };

Query 2

this.textWrapSettings = { wrapMode: 'Header' };

** Default view **

** Resized to middle (Allow to happen) **

** When further resize, this cannot be happened. Header column height shouldn't be change. Excess text should hide **

-- Not allow to happen --

-- Allow to happen --

Reply | Reply with quote

Prasanna Kumar Viswanathan [Syncfusion]

Replied On February 20, 2020 03:35 PM UTC

Hi Neo,

Thanks for the update

Query#: Disable wrapping should be affected to the header text only

If you want to disable wrapping should be affected to the header text only , you have set css to remove the wrap on a header cell. So we suggest you to follow the below way to achieve your requirement. Please refer the below code example and sample for more information.

App.component.css

.e-grid .e-headercell.e-removewrap{

white-space: nowrap;

text-overflow: ellipsis;

}

Sample: https://stackblitz.com/edit/angular-f151179-jb7um1?file=app.component.ts

Query#: When further resize, this cannot be happened. Header column height shouldn't be change

By default, we have wrapped required custom text in break-word mode in CSS level. So only our text wrap works like this. Refer below image.

As per your requirement you can achieve your requirement by customizing the above word-wrap and overflow-wrap property in CSS level in like below.

For Example:

If you are not ok with above suggestion. You can restricted the columns to resize in between minimum and maximum width by defining the columns.minWidth and columns.maxWidth. In the below sample, all the columns are defined with minimum and maximum width. Please refer the below code example and sample for more information.

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>

Sample: https://stackblitz.com/edit/angular-f151179-wjkk8v?file=app.component.ts

Regards,

Prasanna Kumar N.S.V

Reply | Reply with quote

Neo

Replied On February 24, 2020 06:38 AM UTC

Hi,

Query#: Disable wrapping should be affected to the header text only [Not working. Wrapping should be affected to the header text only. Not for any content]

Reply | Reply with quote

Thiyagu Subramani [Syncfusion]

Replied On February 25, 2020 01:30 PM UTC

Hi Neo,

Sorry for the inconvenienced caused.

We have achieved your requirement “Disable wrapping should be affected to the header text only” using below code in app.component.css file. Please refer to the below code,screenshot and sample.

In this below sample we have achieved your both Query1 : I want to disable 'allowTextWrap' for a particular column. Couldn't find a property to set disable. && Query2 : How to persist header height when resizing along with text wrapping. Refer following screen shot. (Note - Excess text should hide)

[app.component.css]

.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;

}

[app.component.html]

<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>

Sample link : https://stackblitz.com/edit/angular-f151179-bfpzsg?file=app.component.ts

Screenshot:

Note : allowTextwrap disabled in specific(OrderDate) column.

Please get back to us, if you need any further assistance.

Regards,

Thiyagu S

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US