2

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

Abhik Chakraborty
  • 44,654
  • 6
  • 52
  • 63

1 Answers1

4

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
njr101
  • 9,499
  • 7
  • 39
  • 56
  • Thanks its now getting shown. Now having looked at slick.editors.js I could not find any editor that helps uploading image. Like I said I have added some code that will generate custom cell editors and they worked pretty well. Just wondering if there is a way to make file uploader that will allow uploading file and then using some Ajax this could be updated in the database. – Abhik Chakraborty Nov 10 '11 at 15:49
  • There's no example editor for a file uploader, but it would be fairly straightforward to write one. Are you trying to have a file uploader in every row in the grid? – njr101 Nov 10 '11 at 16:05
  • Yes its in every row. Please let me know if you have some idea how to do it. Thanks. – Abhik Chakraborty Nov 10 '11 at 16:16
  • Just follow the approach above. Write the HTML for a single file uploader on your page first. When you have it working correctly, just move the HTML into the custom formatter so that it is rendered in every row. If you don't know how to write a file uploader at all, post a new question for that. – njr101 Nov 11 '11 at 08:21