SlickGrid Formatters

Edson Chen edited this page Jan 19, 2017 · 5 revisions
Clone this wiki locally

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>';
        }



    }
}

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; }