Grid - Column aligment

Suite and Optimus Suite 6
#1

Hi, is there a way to align the content of columns (possibly excluding tricky ways) like setColAlign?
I’ve not found nothing about in the documents, but i’ve seen numeric content align to the right (only if the first char of the first row of dataset in column contain is a number) and Strings to the left… there is a way to force?

1 Like
#2

Unfortunately currently there is no analog of the setColAlign() method for thew grid 6.
You may change the align for the data in the column using the “mark” property of the column.
For the align in the header you may use the css property.
Here is an example:

// in the grid config:
columns: [
{ width: 200, id: "country", header: [{ text: "Country", css: "newAlign" }], mark: () => "newAlign" },

// and in the css:
.newAlign {
text-align: center;
}

We’re planning to extend API fro the “align” property in the future updates, so you will definitely will be able to find the analog of the setColAlign method for the dhtmlxGrid 6.

#3

Hi sematik. Thanks for this tip.

My problem is similar. Column alignment seems to change to “right” when data is loaded that contains values that may be seen as numbers.

Your tip seems to solve the alignment of the text, so thank you for that. But the “sort icon” in the header cell also moves to be on the left. The other “left” aligned headers have the icon on the right of the cell.

Do you have a tip for me to keep the icon on the right?

Thanks
RichardB

#4

Currently there is an align property in the dhtmlxGrid:
https://docs.dhtmlx.com/suite/grid__configuration.html#alignment

#5

Thank you for your response sematik.

I have set that property on all headers and columns, and it appears to work … until I load data into the grid. Then some columns switch to “right” aligned.

I have not tested extensively to see what contents of a cell makes the grid switch that column to right aligned, but it appears as if it might be that some cells content starts with a digit. Like “3CX”. Or “3D Studio”

I’m using 6.4.2 Pro - I do not appear to have access to more recent versions.

#6

Unfortunaetly I was not able to reproduce the problem locally.
The following snippet works well for me:
https://snippet.dhtmlx.com/yzvnoxxo
Could you please, provide a similar snippet, or a demo link where the porblem can be reconstructed.

#7

Hi sematik

Here is a snippet based on yours that illustrates the problem.
https://snippet.dhtmlx.com/8jygyosa

Column “user” is left aligned by default and the content does not change the alignment when loaded. That column header displays it’s sort icon on the right of the header block.

Column “country1” is left aligned by default, but it changes to right aligned when the data is loaded. Its sort icon is displayed on the left.

Column “country2” is explicitly left aligned - both the column and header. But when the data is loaded …

  • with Suite 6.4 - it switches to right aligned with the sort icon on the left.
  • with Suite 6.5.5 - it remains left aligned, but the sort icon is on the left and not the right like the other left aligned headers.

When removing the “3” from the front of “3d studio”, the column stays left aligned.

#8

The porblem with the sorting icon align is confirmed. We’ll try to fix it in the future updates.

#9

We have fixed your reported problem withe sorting icon in the latest (7.0.2) update. Now it should display correctly.