Disable allowTextWrap for a particular column

[Neo]

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)

[Prasanna Kumar Viswanathan]

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] 

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

    } 

 

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] 

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

    } 

} 

 

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 

[Neo]

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

[Prasanna Kumar Viswanathan]

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 

[Neo]

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]

[Thiyagu Subramani]

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