How to dynamically change table column alignment in the designer

OL Connect Professional General
1

Hi,

The column is represented as follows:

@D6@

In the @D6@ script I inserted the following code:

var x = document.getElementsByClassName(“data DESCRIPTION_ENG”);
x[0].style.textAlign = “right”;

but it did not work although I tested it in a simple html file and it worked fine.

Any suggestion?

Thanks.

2

Hello farid,

Here’s the way you should do it in your script (the “proper” Connect API way):

query(“.data .DESCRIPTION_ENG”).css(“text-align”, “right”);

Basically:

  • query() is like doing a jquery selection, it emulates a “selector” script in the query. If more than one result is found by the query, the rest of the code applies to all of them.
  • .css() changes a single CSS property, in this case text-align.

For optimization’s sake, if you have more than one of these, you could simply make a separate script with the “.data .DESCRIPTION_ENG” selector with a single line of code:

results.css(“text-align”, “right”);

3

Thank you Evie, it worked, with one modification:

The class name contains a space: “data DESCRIPTION_ENG”

Apparently in the query the space should be replaced by a dot. I removed the space that was after data in your query and it worked:

query(“.data.DESCRIPTION_ENG”).css(“text-align”, “right”);

4

A class name cannot contain a space in valid CSS. What you have there is an element that actually has 2 classes applied to it, so in your stylesheet, there’s probably one data{} entry and one DESCRIPTION_ENG {} entry.

Technically you could just do query(“.DESCRIPTION_ENG”) and that would work fine (unless description_eng is used in anything else than instances of that element).

As for the space, yes you’re right, it wouldn’t work in your case. The space means “Descendant of”, so it would look for an element that has the description_eng class only when it’s a descendant (is contained within) an element that has the data class.

Even though we don’t actually use jQuery for our API, it’s still really, really close to it in terms of features. Take a look at the jQuery Selectors page for more information.