How can I set up formatters in SlickGrid?

Question

I already did my studies, I know how to make a custom formatter, or editor and how to use it. My problem is, I am unable to set up, or use a formatter. My structure:

The jQuery includes:

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>


    <script type="text/javascript" src="jquery.event.drag-2.2.js"></script>
    <script type="text/javascript" src="slick.core.js"></script>
    <script type="text/javascript" src="slick.editors.js"></script>
    <script type="text/javascript" src="slick.formatters.js"></script>
    <script type="text/javascript" src="slick.grid.js"></script>

Everything is unedited above. The code implementing the grid:

                        var grid; var cols; var rows; var options = {
                            enableCellNavigation: true,
                            enableColumnReorder: false,
                            forceFitColumns: true
                        };
*rows and cols come from server side via JSON.parse*
grid = new Slick.Grid("#results", rows, cols, options);

The code, which comes from the server and fills up the rows and cols variable is basically this:

            cols:
            echo json_encode('[
                    {"id":"price",      "name":"Ár",                "field":"price"},
                    {"id":"location",   "name":"Elhelyezkedés",     "field":"location"},
                    {"id":"egyeb",      "name":"Lófasz",            "field":"egyeb"},
                    {"id":"pic",        "name":"Képek",             "field":"pic", "formatter":"Slick.Formatters.PercentComplete"}
                ]');
            rows:
            echo json_encode('[
                    {"price": "5", "location":"AlsóBélaCsecselény",     "egyeb":"lófasz",   "pic":"1",  "link":"ezittahelye"},
                    {"price": "6", "location":"qrsóBéqrcselény",        "egyeb":"lófasz",   "pic":"2",  "link":"ezittahelye"},
                    {"price": "7", "location":"AlsóBélaqwqwrelény",     "egyeb":"lófasz",   "pic":"3",  "link":"ezittahelye"},
                    {"price": "8", "location":"qwrCsecselény",          "egyeb":"lófasz",   "pic":"4",  "link":"ezittahelye"}
                ]');

Everything works fine, when the pic column does not have a formatter, and the grid works with extra properties for the columns as well, such as a mistyped "formatter" tag(like "fformatter" or whatever),

but the Javascript gives me the following error every time the JSON code has a "formatter" property:

Uncaught exception: TypeError: 'getFormatter(row, m)' is not a function

every damn time I try to load the table, the formatters mess up everything and I don't know what to do next! I tried to track back the bug, and it lead me to the 1124. line of the source code of slick.grid.js, this function somehow breaks everything with the return statement..

function getFormatter(row, column) {
  var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);

  // look up by id, then index
  var columnOverrides = rowMetadata &&
      rowMetadata.columns &&
      (rowMetadata.columns[column.id] || rowMetadata.columns[getColumnIndex(column.id)]);

  return (columnOverrides && columnOverrides.formatter) ||
      (rowMetadata && rowMetadata.formatter) ||
      column.formatter ||
      (options.formatterFactory && options.formatterFactory.getFormatter(column)) ||
      options.defaultFormatter;
}

Any help would be appreciated!

Edit: Here's how I get the the code from the server:

                            $.post( "queries.php?event=search&&phase=columns", $("#full_search").serialize(), function(data){
                                    cols = JSON.parse(data);
                                    alert(cols[1].id);
                                    $.post( "queries.php?event=search&&phase=rows", $("#full_search").serialize(), function(data){
                                        rows = JSON.parse(data);
                                        alert(rows[1].link);
                                        grid = new Slick.Grid("#results", rows, cols, options);
                                        alert(grid.getData().length);
                                        return false;
                                    },"json");
                                return false;
                            },"json");
                            },"json");

Answer 1

Alright I solved it! I parsed the data, and then set the formatter string to an object: cols = JSON.parse(data); cols[3].formatter = Slick.Formatters.PercentComplete; and that does it! Thank you for your help!

I would suggest something like this.

Slick.Formatters.PercentComplete is a function and there is no functions in json as shown in http://json.org. Also, validation fails in a JSON that has a function. You can try validate here: http://jsonlint.com/.

You can´t have functions in JSON. Then, after receiving the 'almost JSON' data, you need parse it on the client with javascript, like you did.

Thanks for your sample! I´m having the same problem and it was helpful.

In my case I get metadata with jQuery Ajax:

req = $.ajax({type: 'GET',
              url: url,
              dataType: 'json',
              async: false}).done(function(meta) { metadata = meta; });

The metadata returned is something like this:

{"errors":{}, 
 "columns":[{"formatter":"TaskNameFormatter",
             "field":"1",
             "id":"1","width":220,"name":"Hierarchy1","cssClass":"cell-title"},
             OTHERS_COLUMNS]}

Realize that the formatter is still a string. Then I go through all columns changing the formatter from String to Function with this code:

  $.each(metadata.columns, function(index, value) {
                              if(typeof value.formatter != "undefined") {
                                 value.formatter = eval(value.formatter);
                              } 
  });

Answer 2

For users with data coming thru JSON, the object call must still be wrapped in quotes; however, I was able to find in the slick.grid.js file the part where it was bailing:

if (d) {
  if(m.formatter){m.formatter=eval(m.formatter)} // make it an object call instead of string
  stringArray.push(getFormatter(row, m)(row, cell, value, m, d));
}

Answer 3

Slick.Formatters.PercentComplete shouldn't be a string. It's a function (class constructor) defined in slick.formatters.js.