Grid SlickGrid Formatters - serenity-is/Serenity GitHub Wiki

Hi, everyone. So, as Serenity relies on the SlickGrid to show your Data, I thought of putting all formatters here.

1) Currency Formatter - Thanks to SimeonDD See Issue #1077

namespace YourProjectNameHere {

    @Serenity.Decorators.registerFormatter()
    export class CurrencyFormatter implements Slick.Formatter {

        @Serenity.Decorators.option()
        public cultureName: string;
        @Serenity.Decorators.option()
        public currencyName: string;

        format(ctx: Slick.FormatterContext) {

            //If the input is not a float - just bounce it back
            if (isNaN(parseFloat(ctx.value))) {
                return ctx.value;
            }

            //Use standard currency formatting; This can be modified for other styles (% etc).
           //If no parameters passed then fallback to en-US , USD formatting.
            this.cultureName = this.cultureName ? this.cultureName : 'en-US';
            this.currencyName = this.currencyName ? this.currencyName : 'USD';

            var formatter = new Intl.NumberFormat(this.cultureName, {
                style: 'currency',
                currency: this.currencyName,
                minimumFractionDigits: 2,
            });

            //use the above formatter to return the reformatted value
            var percentValue = formatter.format(Number(ctx.value));
            return "<span>" + percentValue + '</span>';
        }



    }
}

Then, you just call:

[CurrencyFormatter(CultureName = "en-US", CurrencyName = "EUR")]
public Decimal Q1Budget { get; set; }

[CurrencyFormatter(CurrencyName = "GBP")]
public Decimal Q2Budget { get; set; }

[CurrencyFormatter]
public Decimal Q3Budget { get; set; }

2) TextArea new lines Formatter - See issue [#1229]

It's just to replicate new lines entered in TextArea Field to the column on Grid and reproduce it to the exported PDF

namespace yourProject {

    @Serenity.Decorators.registerFormatter()
    export class TextAreaColumnFormatter implements Slick.Formatter {

        format(ctx: Slick.FormatterContext) {

            if ((ctx.value == null || String(ctx.value).length == 0)) {
                return ctx.value;
            }



            var textArea: String = ctx.value;
            textArea.replace(/\\r\\n/g, "<br />");

            return "<span>" + textArea + '</span>';
            
            //if above not works replace above 3 lines with following 2 lines
               var textArea: String = ctx.value;
               return "<span style=\"white-space: pre-line;\">" + textArea + '</span>';
        }



    }
}

Then just use it:

[TextAreaColumnFormatter ]
public String SomeTextAreaField { get; set; }

3) Generic Use for styling

You can also have css styling... Just for quick demo. Let's see an example:

namespace yourProject {

    @Serenity.Decorators.registerFormatter()
    export class TestFormatter implements Slick.Formatter {

        format(ctx: Slick.FormatterContext) {

            if ((ctx.value == null || String(ctx.value).length == 0)) {
                return ctx.value;
            }



            var testNumber: number = ctx.value;

            if (testNumber < 20)
                return "<div style='height:100%; background-color: #ffd5c0;'>" + testNumber + '</div>';

            return "<div style='height:100%;  background-color:#00a68f;'>" + testNumber + '</div>';

        }



    }
}

Use it

[Width(80), AlignRight, TestFormatter]
public Decimal UnitPrice { get; set; }

[Width(80), AlignRight, TestFormatter]
public Int16 UnitsInStock { get; set; }

[Width(80), AlignRight, TestFormatter]
public Int16 UnitsOnOrder { get; set; }

4) Percentage Formatter - Thanks to StewartCossey

If you have fractional values in your databases that are used as percentages then this formatter will convert them - ie: the column value 0.1520 would be converted to the output 15.20%.

namespace yourNamespace {

    /**
     * Format a Grid Column as a percentage.
     */
    @Serenity.Decorators.registerFormatter()
    export class PercentageFormatter implements Slick.Formatter {

        @Serenity.Decorators.option()
        public cultureName: string;

        @Serenity.Decorators.option()
        public decimalPlaces: number;

        format(ctx: Slick.FormatterContext) {

            if (!Q.isValue(ctx.value)) {
                ctx.value = 0;
            }

            this.cultureName = Q.coalesce(this.cultureName, 'en-NZ');
            this.decimalPlaces = Q.coalesce(this.decimalPlaces, 2);

            var formatter = new Intl.NumberFormat(this.cultureName, {
                style: 'percent',
                minimumFractionDigits: this.decimalPlaces,
            });

            //use the above formatter to return the reformatted value
            var percentValue = formatter.format(Number(ctx.value));
            return percentValue;
        }



    }
}

There are two options for this formatter, the culture formatting for the percentage (default en-NZ) and the percentage decimal places (default 2).

Usage

    [BasedOnRow(typeof(Entities.ProductExampleRow))]
    public class ProductExampleColumns
    {
        [PercentageFormatter(DecimalPlaces = 3)]
        public Decimal Discount { get; set; }
    }