Announcement

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

    ListGridField.valueIcon - is there a functionality similar to snapTo?

    v12.0p_2020-01-12/EVAL Development Only

    Version 81.0.4044.92 (Official Build) (64-bit)

    I am wonder if ListGridField.valueIcons can be set to "snapTo" an area of the available space in the cell. My field is currently setup to have a valueIcon, valueIconOrientation: "right" and some padding for the valueIcon on both sides, using the appropriate left/right padding properties. The issue is that we want the valueIcons for each row to lineup, but the "title" (it is really the value for the field) is not the same on each record, and thus we have misaligned icons.

    See the example below:
    Click image for larger version

Name:	SC-question-valueIcon-snapTo.PNG
Views:	49
Size:	940 Bytes
ID:	262101

    Is there any way to achieve this with valueIcons? I am aware we can use something else like recordComponents but I am trying to avoid something going to that level due to the fact we have enough recordComponents loading already, and I am trying to avoid any performance hits.

    Thanks in advance!
    Last edited by erikfisch; 22 Apr 2020, 10:30. Reason: making image appear

    #2
    I came back here to answer my own question in case anyone else has this issue.

    ListGrid.formatCellValue will help achieve this by wrapping the value part in an inline div, and giving it explicit width.

    Example:

    Code:
        formatCellValue: function (value, record, rowNum, colNum, grid) {
            var field = this.getField(colNum);
    
            if (field.name !== "myField") {
                return value;
            }
    
    
            return "<div style='display: inline; float: left; width: 37px;'>" + value + "</div>";
        },
    Output:
    Click image for larger version

Name:	SC-question-valueIcon-snapTo-solution.PNG
Views:	48
Size:	999 Bytes
ID:	262102
    Last edited by erikfisch; 22 Apr 2020, 10:32.

    Comment

    Working...
    X