We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Disable allowTextWrap for a particular column

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
loading
Tags: Grid
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)

Image

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

 
 
 
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' }; 
    } 
} 
 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


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

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

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

-- Not allow to happen --
3
-- Allow to happen --
4


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

 
 
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> 
 
 
Regards, 
Prasanna Kumar N.S.V 


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]

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> 
 
 

Screenshot:  
 
 
 
Note :  allowTextwrap disabled in  specific(OrderDate) column. 
 
Please get back to us, if you need any further assistance. 
 
Regards, 
Thiyagu S 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon