Page 1 of 1

Align numeric fields in a grid screen

Posted: Mon Aug 23, 2010 3:50 pm
by jac53
What is the way to align numeric fields in a grid screen? I got the following:

Totals
255
812
1099 <- I want to align this one
215

Thks

Re: Align numeric fields in a grid screen

Posted: Mon Aug 23, 2010 3:55 pm
by RussCraig
Select the grid, and in the "Text Align" property of the "Font and Text" section, you can enter a comma-separated list of alignments. So if you wanted to align the columns as say "left, left, right, center, left", just enter "left,left,right,center,left" in the "Text Align" property.

Or, if you are using dynamic output fields, you just align those individually. Select the field and choose the desired alignment.

Hope that helps.
-RC

Re: Align numeric fields in a grid screen

Posted: Mon Aug 23, 2010 4:25 pm
by jac53
I am using output fields I did that before, in the text align I have right, it does not work. If I check use 1000 separator(,) then it is worse, it goes to spaces to the right as follows:

Totals
255
812
1,099

Re: Align numeric fields in a grid screen

Posted: Mon Aug 23, 2010 5:14 pm
by Rob
Try widening the output field and then select right align.

Re: Align numeric fields in a grid screen

Posted: Mon Aug 23, 2010 5:33 pm
by jac53
It did not work either. The only way to align to the right is checking zero fill then I got:

0000255
0000812
0001099 < -- now it is aligned

Any ideas

Re: Align numeric fields in a grid screen

Posted: Wed Aug 25, 2010 9:23 am
by jac53
I had to declare each grid column as character and do the following in the RPG program:

evalr TOTROWC = %TRIM(%EDITC(TOTROW:'2'))

Any hope for the next release?

Re: Align numeric fields in a grid screen

Posted: Wed Sep 01, 2010 11:42 am
by David
I think the problem here may relate to the field width and where the text-align setting is made.

The output field widget inside the grid cell has to have a set width. The widths are not set by default. Try expanding the field with the mouse to set a width.

Then visually right align the output field widget in the grid cell.

Then, set the "text-align" property to "right" on the actual output field widget -- not the grid itself.

The text-align property on the grid is ignored for RPG-style subfile grids with output fields in the cells.

It only comes into play when using an SQL-based grid where the UI framework renders the data into the cells by itself with no output field widgets.

Re: Align numeric fields in a grid screen

Posted: Wed Sep 01, 2010 6:09 pm
by jac53
Hi David:

You were absolutely right. It works perfect. Good job

Re: Align numeric fields in a grid screen

Posted: Mon Dec 17, 2012 10:00 am
by Shon
I had this same problem, so thank you for the answer.
It does bring up another question though. On a left-aligned output field in a grid, if the field is too small and the edge of the column is reached, the right side of the text simply gets cut off. On a right-aligned output field in a grid, if the field is too small and the edge of the column is reached, shouldn't the left side of the text be cut off? Instead, it ignores the alignment. It think that it would be easier to interpret the error (the output field is too small) for a right-aligned output field if the left side of the text got cut off.

Re: Align numeric fields in a grid screen

Posted: Mon Dec 17, 2012 1:49 pm
by Scott Klement
Hi Shon,

What's happening is that the Profound UI JavaScript framework is generating code that the browser users to display the grid. Under the covers, Profound UI outputs a DIV object to the DOM, styled with overflow:hidden. The DIV object represents one cell of the grid, and the overflow: hidden tells the browser that anything that doesn't fit within the cell should not be displayed (the overflowing text is hidden)

Unfortunately, the browser is choosing to truncate on the right (not the left, as we expect.) There isn't much we can do about this -- that's just how the browser works.

I would suggest adjusting the size of your columns so that all of the data fits within them. The easiest way to do that is to click Launch / Launch Preview within the designer. This will give you the ability to type text for each field, and see how the fields will look.

Since PUI displays usually use variable-width fonts, you should try filling in the field with the maximum number of the widest possible character. For example, in a numeric-only field, the '8' character is usually the widest one, so for a "10S 0" field, you might try filling it in with 10 8's, and make sure that fits nicely. For an alphanumeric field, capital W is normally the widest character, so for a 20A field, you might try typing 20 W's to see if it fits nicely on the screen.

With preview mode, it's easy to try different sizes/values (since you don't have to save/compile the display file each time) until you find a field size that fits nicely, and holds all of your data.

Hope that helps!