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. Image for the cookie policy date

Column TextAlign options

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

8 Replies

TR Travis 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
      }
    );


TS Thavasianand Sankaranarayanan Syncfusion Team 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. 



TR Travis 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!!


TS Thavasianand Sankaranarayanan Syncfusion Team 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.  



TR Travis 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.


KM Kuralarasan Muthusamy Syncfusion Team 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 



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



TS Thavasianand Sankaranarayanan Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon