How To: Use a SlickGrid Formatter

    To use a SlickGrid formatter function, like percent complete bar formatter at %Complete column of SlickGrid example:

    http://mleibman.github.io/SlickGrid/examples/example2-formatters.html

    First include javascript file containing these formatters in your _LayoutHead.cshtml file (MyProject.Web/Views/Shared/_LayoutHead.cshtml):

    You also need to include following CSS from example.css (can be inserted in site.less):

    2.   display: inline-block;
    3.   height: 6px;
    4.   -moz-border-radius: 3px;
    5.   -webkit-border-radius: 3px;
    6. }

    To reference a SlickGrid formatter at server side, you need to declare a formatter type for Serenity grids.

    In MyApplication.Script project, next to StudentCourseGrid.cs for example, define a file (PercentCompleteBarFormatter.cs) with contents:

    1. using System;
    4. {
    5.     public class PercentCompleteBarFormatter : ISlickFormatter
    6.     {
    7.         private SlickColumnFormatter formatter = 
    8.             Type.GetType("Slick.Formatters.PercentCompleteBar").As<SlickColumnFormatter>();
    10.         public string Format(SlickFormatterContext ctx)
    12.         }
    13.     }
    14. }

    Now you can reference it at server side:

    To get intellisense for PercentCompleteBarFormatter server side (so to avoid using magic strings), you should transform T4 templates (make sure solution builds successfully before transforming).

    After this you can reference it like this server side:

    1. public class StudentCourseColumns
    2. {
    3.     //...
    4.     [PercentCompleteBarFormatter, Width(200)]
    5.     public Decimal CourseCompletion { get; set; }

    It is also possible to set SlickGrid column formatter function directly in script side code without defining a Serenity formatter class, e.g. in StudentCourseGrid.cs by overriding its GetColumns method:

    This is not reusable but saves you from defining a formatter class.