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

Column TextAlign options

Thread ID:

Created:

Updated:

Platform:

Replies:

146519 Aug 7,2019 12:06 AM UTC Aug 19,2019 07:25 AM UTC JavaScript - EJ 2 8
loading
Tags: Grid
Travis
Asked On August 7, 2019 12:06 AM UTC

I am creating columns for a grid as seen below. 

  var ejColumn = new ej.grids.Column
    (
      {
        field: 'Col' + i,
        headerText: column.Header,
        allowEditing: false,
        showInColumnChooser: false
      }
    );

I want to align the text within the cell to be "top" "left", for example.  I can adjust the text horizontally by using "ejColumn.textAlign = "left";".  How can I adjust the column text vertically?

Thanks

Travis
Replied On August 7, 2019 12:34 AM UTC

See first question below, but also tried to align the column headers differently than the column text (see below).  This did not appear to work.  Please advise.

var ejColumn = new ej.grids.Column
    (
      {
        field: 'Col' + i,
        headerText: column.Header,
        HeaderTextAlign: "center",
        allowEditing: false,
        showInColumnChooser: false
      }
    );

Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 7, 2019 11:48 AM UTC

Hi Travis, 

Greetings from Syncfusion support. 

Query 1: How can I adjust the column text vertically? 
 
Based on your query we suspect that you want to move the textAlign into top left position and we can achieve your requirement using the below code example. 
 
[index.js] 
 
var grid = new ej.grids.Grid({ 
    dataSource: data, 
    gridLines: 'Both', 
    columns: [ 
 
        { field: 'CustomerName', headerText: 'Customer Name', width: 150, textAlign: 'Left', customAttributes: { 'class': 'customcss' } }, 
 
         ... 
 
    ] 
}); 
 
------------------------------------------------------------------------------------------------ 
[index.html] 
 
<style> 
    .e-grid .e-rowcell.customcss { 
        padding-top: 0px !important; 
    } 
 
    .e-grid .e-headercell.customcss { 
        padding-bottom: 20px !important; 
    } 
</style> 
 

Refer the screen shot. 

 

We have prepared sample in the following link. 


Refer the help documentation. 


Query 2: HeaderTextAlign “center” is not working. 

In your code example you have using the HeaderTextAlign but we need to use like this “headerTextAlign” in the columns API. 

Refer the below code example. 

[index.js] 

var grid = new ej.grids.Grid({ 
     
      …. 
 
    columns: [ 
                { field: 'CustomerName', headerText: 'Customer Name', headerTextAlign: "Center", width: 150 } 
 
                ...  
 
    ] 
}); 



Refer the below screen shot. 

  

We have prepared a simple sample in the following link. 


Refer the help documentation. 


Regards, 
Thavasianand S. 


Travis
Replied On August 7, 2019 11:16 PM UTC

Not exactly what I was looking for, however, it put me in the right direction.  Thanks for the help!!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 8, 2019 05:26 AM UTC

Hi Travis, 
 
Thanks for your update. 
 
We are happy that the problem is resolving at your end. 
 
If you have any concern on this please let us know. 
 
Regards, 
Thavasianand S.  


Travis
Replied On August 14, 2019 10:56 PM UTC

I do have another question:

I want to align the header of the columns to TopLeft, or BottomRight.  It seems there is not a custom attribute for the header to do this.  Is this possible.

Kuralarasan Muthusamy [Syncfusion]
Replied On August 15, 2019 08:55 AM UTC

Hi Travis, 
 
From your query, we found that you want to apply the custom CSS to the Grid header cell alone. So, you can achieve this requirement like as below code snippet, 
 
var grid = new ej.grids.Grid({ 
    dataSource: data, 
    allowPaging: true, 
    columns: [ 
        { field: 'OrderID', headerText: 'Order ID', width: 120, customAttributes: {class: 'orientationcss'} }, 
        { field: 'CustomerName', headerText: 'Customer Name', width: 150 }, 
    ] 
}); 
grid.appendTo('#Grid'); 
 
<style> 
  .orientationcss .e-headercelldiv { 
    padding-top: 10px; 
    text-align: right; 
  } 
</style> 
 
 
Regards, 
Kuralarasan M 


Travis
Replied On August 15, 2019 08:37 PM UTC

So that seems to work for the header, but if I want to both adjust the header and the column its not working.

Can you show an example of the header being in the TopLeft and the column data in the BottomRight?  I want todo something like this...  The grid picks the last class in the list.


customAttributes: {class: 'orientationcss', class: 'customcss'}

<style>
  .orientationcss .e-headercelldiv {
    padding-top: 0px;
    padding-bottom: 20px;
    text-align: left;
  }

  .e-grid .e-rowcell.customcss {
    padding-top: 10px;
    padding-bottom: 0px;
    text-align: right;
}
</style>


Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 19, 2019 07:25 AM UTC

Hi Travis, 

Based on your query we suspect that you want to adjust the header into top left and content into bottom right in Grid UI. We can achieve your requirement by using the below CSS. 

Refer the below code example. 

[index.js] 

var grid = new ej.grids.Grid({ 
    dataSource: data, 
    allowPaging: true, 
    columns: [ 
        { field: 'OrderID', headerText: 'Order ID', width: 120, customAttributes: { class: ['orientationcss', 'customcss'] } }, 
        { field: 'CustomerName', headerText: 'Customer Name', width: 150 }, 
    ] 
}); 

--------------------------------------------------------------------------------------------------------------- 
[index.html] 

<style> 
  .orientationcss .e-headercelldiv { 
    padding-bottom: 20px; 
    text-align: left; 
  } 
  .e-grid .e-rowcell.customcss { 
    padding-top: 10px; 
    padding-bottom: 0px; 
    text-align: right; 
} 
</style> 
 

We have prepared modified the sample in the following link. 


Regards, 
Thavasianand 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