title: How can I set up formatters in SlickGrid?
body: <p>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:</p>
  
  <p>The jQuery includes:</p>
  
  <pre><code>    &lt;script type="text/javascript" src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script type="text/javascript" src="jquery.event.drag-2.2.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="slick.core.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="slick.editors.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="slick.formatters.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="slick.grid.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Everything is unedited above.
  The code implementing the grid:</p>
  
  <pre><code>                        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);
  </code></pre>
  
  <p>The code, which comes from the server and fills up the rows and cols variable is basically this:</p>
  
  <pre><code>            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"}
                  ]');
  </code></pre>
  
  <p>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), </p>
  
  <p>but the Javascript gives me the following error every time the JSON code has a "formatter" property:</p>
  
  <p>Uncaught exception: TypeError: 'getFormatter(row, m)' is not a function</p>
  
  <p>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..</p>
  
  <pre><code>function getFormatter(row, column) {
    var rowMetadata = data.getItemMetadata &amp;&amp; data.getItemMetadata(row);
  
    // look up by id, then index
    var columnOverrides = rowMetadata &amp;&amp;
        rowMetadata.columns &amp;&amp;
        (rowMetadata.columns[column.id] || rowMetadata.columns[getColumnIndex(column.id)]);
  
    return (columnOverrides &amp;&amp; columnOverrides.formatter) ||
        (rowMetadata &amp;&amp; rowMetadata.formatter) ||
        column.formatter ||
        (options.formatterFactory &amp;&amp; options.formatterFactory.getFormatter(column)) ||
        options.defaultFormatter;
  }
  </code></pre>
  
  <p>Any help would be appreciated!</p>
  
  <p>Edit: Here's how I get the the code from the server:</p>
  
  <pre><code>                            $.post( "queries.php?event=search&amp;&amp;phase=columns", $("#full_search").serialize(), function(data){
                                      cols = JSON.parse(data);
                                      alert(cols[1].id);
                                      $.post( "queries.php?event=search&amp;&amp;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");
  </code></pre>