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

[erikfisch]

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:


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!

[erikfisch]

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:

    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: