How To: Use a SlickGrid Formatter

This section is pending update for TypeScript

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

Including Required Resources

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

  1. //...
  2. @Html.Script("~/Scripts/jquery.slimscroll.js")
  3. @Html.Script("~/Scripts/SlickGrid/slick.formatters.js")
  4. @Html.Script("~/Scripts/Site/MovieTutorial.Script.js")
  5. //...

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

  1. .percent-complete-bar {
  2.   display: inline-block;
  3.   height: 6px;
  4.   -moz-border-radius: 3px;
  5.   -webkit-border-radius: 3px;
  6. }

Declaring a Serenity DataGrid Formatter

Let’s say we have StudentCourseGrid with a CourseCompletion column that we wan’t to use Slick.Formatters.PercentCompleteBar formatter with. 

  1. public class StudentCourseColumns
  2. {
  3.     //...
  4.     [Width(200)]
  5.     public Decimal CourseCompletion { get; set; }
  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 Serenity;
  2. using System;
  4. namespace MyApplication
  5. {
  6.     public class PercentCompleteBarFormatter : ISlickFormatter
  7.     {
  8.         private SlickColumnFormatter formatter = 
  9.             Type.GetType("Slick.Formatters.PercentCompleteBar").As<SlickColumnFormatter>();
  11.         public string Format(SlickFormatterContext ctx)
  12.         {
  13.             return formatter(ctx.Row, ctx.Cell, ctx.Value, ctx.Column, ctx.Item);
  14.         }
  15.     }
  16. }

Replace MyApplication with your root namespace (solution name).

Now you can reference it at server side:

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

Rebuild your project and you will see that CourseCompletion column has a percentage bar just like in SlickGrid example.

Getting Intellisense and Compile Time Checking To Work

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

Alternate Option (Not Recommended)

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:

  1.     protected override List<SlickColumn> GetColumns()
  2.     {
  3.         var columns = base.GetColumns();
  4.         columns.Single(x => x.Field == "CourseCompletion ").Formatter = 
  5.             Type.GetType("Slick.Formatters.PercentCompleteBar").As<SlickColumnFormatter>();
  6.         return columns;
  7.     }

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