Column TextAlign options

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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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.

Reply | Reply with quote

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

Reply | Reply with quote

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.

Reply | Reply with quote

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.

Reply | Reply with quote

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>

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

Regards,

Kuralarasan M

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Regards,

Thavasianand S.

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US