Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    RTL Mode ListGrid number columns to be right aligned

    Hi Team,

    We are using SC11.0p.

    In LTR Mode the columns in ListGrid are coming properly and are readable especially number related columns.
    Please see the attached screenshot for your reference.

    Click image for larger version

Name:	image002.png
Views:	181
Size:	7.7 KB
ID:	260188

    The numbers above are quite readable especially with decimal values aligned properly.

    But if we turn the screen to RTL Mode then the ListGrid columns are displayed as below.

    Click image for larger version

Name:	image001.png
Views:	195
Size:	8.8 KB
ID:	260189


    In the above screenshot numbers are left aligned but I want numbers always to be right aligned even in RTL only becuase if you see the deicmals are not properly aligned and it has completely lost its readability. But text should be right aligned as shown in the screenshot.

    One solution is to explicitly specify right only irrespective of LTR or RTL mode for each number column that I have in the ListGrid. But I have about 100 screens now with almost 500 listgrids showing the data. We cant go to each file and specify the align property for each listgridfield.

    Is there any better solution that you could suggest with.

    Awaiting your reply.

    Thanks in advance.



    #2
    You could create a ListGrid subclass that forces right alignment on numeric fields by iterating through fields before draw and changing alignment settings, then ensure that all of your grid usage uses that subclass.

    Comment


      #3
      Could you please give me the code snippet on how to do it before draw of ListGrid

      Comment


        #4
        You could do something like this:
        Code:
        isc.defineClass("ExtendedListGrid", isc.ListGrid);
        isc.ExtendedListGrid.addProperties({
        
            fieldIsNumeric : function (field) {
                var type = field.type,
                    isNumber = false;
                while (!isNumber && type != null) {
                    if (type == "integer" || type == "float") isNumber = true;
                    var simpleType = isc.SimpleType.getType(field.type);
                    type = simpleType && simpleType.inheritsFrom;
                }
                return isNumber;
            },
            draw : function () {
                // In RTL mode, force numeric fields to be right-aligned
                if (isc.Page.isRTL()) {
                    var fields = this.fields || [];
                    for (var i = 0; i < fields.length; i++) {
                        if (this.fieldIsNumeric(fields[i])) {
                            fields[i].align="left";
                            fields[i].cellAlign="left";
                        }
                    }
                }
                return this.Super("draw", arguments);
            }
        });
        Then replace instances of ListGrid with this new class (so replace calls to "isc.ListGrid.create(...)" with calls to "isc.ExtendedListGrid.create(...)")

        Obviously you'll want a better name than "ExtendedListGrid", this was just for demonstration. Also you'll note that we're setting the alignment to "left" even though we actually want "right". This is because in RTL mode, by default field alignment is always flipped from whatever is explicitly specified. You can disable this behavior by setting reverseRTLAlign to false on the grid in question

        Regards
        Isomorphic Software

        Comment

        Working...
        X