Adding custom parameter to column object for custom formatter slickgrid

Question

I need some suggestions regarding adding custom properties to the Column object in the slickgrid. Here is certain scenario I will try to explain to make my problem statement clear.

I am trying to write a custom formatter which abbreviates and capitalizes the names of the cities using first 4 characters of the original text (I have removed other rules to make this problem simple to explain). So for eg, Charlotte will become CHAR in the formatter. I want to do a similar formatting on the a different string column but I need to display and capitalize 5 chars.

This is what I tried.

I wrote a custom formatter and passed custom property 'NumOfChar' in the column object. This property is accessible in the ColumnDef object of the formatter. I was curious to know if this approach is right and acceptable or there is a better way to accomplish this.

AbbreviationFormatter = function(row, cell, value, columnDef, dataContent) {
   var output = ''; 

   if(! columnDef.NumOfChar) {
       columnDef.NumOfChar = 4 // sets default 
   } 
   if(value) {
      output = value.substring(0, columnDef.NumOfChar).toUpperCase();
   }

   return output;
}

Somewhere in the column definition

var columns = [ { id: 'id_1', 
                  field='city', 
                  name='city', 
                  formatter: AbbreviationFormatter, 
                  NumOfChar: 4 },
                { id: 'id_2', 
                  field='randomString', 
                  name='randomString', 
                  formatter: AbbreviationFormatter, 
                  NumOfChar: 6 } , ...
              ];

Thanks.

Answer 1

Yes it is easy doable, I made it and tested it, works as expected. First I made the custom formatter, please note that I extended the SlickGrid Formatters into a separate file which is always better, so here's the code for the custom formatter:

// Extend the Slick.Formatters Object
(function ($) {
    // register namespace
    $.extend(true, window, {
        "Slick": {
            "Formatters": {                
                "CustomUpper": CustomUpperFormatter,
                "TitleCase": TitleCaseFormatter
            }
        }
    });

    // --
    // Capitalize number of chars defined by user
    function CustomUpperFormatter(row, cell, value, columnDef, dataContext) {
        //console.debug(columnDef.formatterOptions.NumOfChar);
        var nbChar = columnDef.formatterOptions.NumOfChar;
        var output = value.substring(0, nbChar).toUpperCase() + value.substring(nbChar);

        return value ? output : '';
    }

    // Capitalize first char of each word
    function TitleCaseFormatter(row, cell, value, columnDef, dataContext) {
        var output = value.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});

        return value ? output : '';
    }       
})(jQuery);

and then your new columns definition:

// your column definition
var columns = [ { id: 'id_1', 
                  field='city', 
                  name='city', 
                  formatter: Slick.Formatters.CustomUpper, 
                  formatterOptions: { NumOfChar: 4 } },
                { id: 'id_2', 
                  field='randomString', 
                  name='randomString', 
                  formatter: Slick.Formatters.CustomUpper, 
                  formatterOptions: { NumOfChar: 4 } } ,
                { id: 'id_3', 
                  field='randomString', 
                  name='randomString', 
                  formatter: Slick.Formatters.TitleCase }, ...
              ];

So basically you can add whichever property you want with the name you want and you would simply call it inside the formatter with the columnDef property, so if you do a console.debug(columnDef); inside the custom formatter, you will see all properties of your row. That's it :)

NOTE:
Please note that I created an object for the formatterOptions but it could actually be directly a NumOfChar, if you go with that approach as you actually started your code with, then simply call the columnDef.NumOfChar. The reason why I prefer using an object is that I can pass multiple options, for example having a minimum and maximum number of chars...

NOTE #2
This gave me the idea of a Title Case formatter (Title Case definition is to capitalize first letter of each word), so I updated my code to include it as well, no options are required though.