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

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