Image Uploader with Slick Grid

Question

I have trying to implement the Slick Grid for listing my data base information. I was able to do most of the things like editable data.(Took help from Stackoverflow ofcource).

Now I got stuck where I need to display the image on the Grid, the image path is saved in the database. I am not able to do so and also not sure how to write a custom editor for the image uploader. If anyone has done it or knows how to do it please advice.

Thanks

Answer 1

You can do this with a custom formatter for the cell.

When defining the columns, specify a custom formatter for the cell like this:

columns = [
  { id: "col1", name: "Col 1", field: "field1" },
  { id: "col2", name: "Image", field: "imgurl", formatter: ImageFormatter },
  ...
];

Then add the new formatter to the slick.editors.js file along with the ones provided in the examples. (Remember to include the slick.editors.js file on your page).

I haven't tested the code below but it should look something like this:

  ... other formatters
},
ImageFormatter: function (row, cell, value, columnDef, dataContext) {

  return "<img src='" + value + "' />";

},
... more formatters