Column TextAlign options

[Travis]

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]

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]

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. 

Link: https://stackblitz.com/edit/es8ajn-wzb2ha?file=index.js 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#customattributes 

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. 

Sample: https://stackblitz.com/edit/es8ajn?file=index.js 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#headertextalign 

Regards, 

Thavasianand S. 

[Travis]

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

[Thavasianand Sankaranarayanan]

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]

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]

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> 

 

Sample: https://stackblitz.com/edit/uqfmzz?file=index.js 

 

Regards, 

Kuralarasan M 

[Travis]

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]

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. 

Sample: https://stackblitz.com/edit/uqfmzz-viiey9?file=index.js 

Regards, 

Thavasianand S.