5

I'm making a formatter for slickgrid that will display a url as an img tag.

Due to the complexity and performance issues involved slickgrid doesnt support dynamic row heights but it does allow setting the global row height via the options.

var gridOptions = { rowHeight: 64 };

To make the images fit in a reasonable way I want to set the img tag to be the same as, or slightly smaller than the row height.

Neither the columnDef nor dataContext parameters that are passed to the formatter appear to have a reference to the parent grid so I'm not sure how to get the row height set on the grid options.

I'd like to avoid having to hack up the slickgrid scripts to pass through what I need as this makes updating a big PITA!

I could declare the formatter inline I guess and pull in the info via a closure but this isn't as reusable as a standalone formatter implimented in a similar mannor to the default formatters. But this is probably what I'll do for now until a better option presents itself.

Can anyone give me any hints or suggestions?

EDIT:

This does what I want but in a non-reusable mannor. It's not masses of code but it would still be nice to only have to write it once.

var gridOptions = { rowHeight: 64 };
var gridImageFormatter = function ImageFormatter(row, cell, value, columnDef, dataContext) {
    return "<img src='" + value + "' style='width:auto;height=" + gridOptions.rowHeight + "' />";
};
var gridColumns = [
    {id: "Id", name: "Id", field: "id", width: 250 },
    {id: "Name", name: "Name", field: "name", width: 100 },
    {id: "Image", name: "Image", field: "image", width: 64, formatter: gridImageFormatter },
    {id: "Url", name: "Url", field: "url", width: 250 }
];

EDIT 2:

Using the power of the internet I found a nice little trick for making images autosize if they are bigger that the availible space.

This doesn't work to make smaller images strech to the given space but I can live with that!

How do I auto-resize an image to fit a div container

And this gives us something which works for most cases and is reusable:

function ImageFormatter(row, cell, value, columnDef, dataContext) {
    return "<img src='" + value + "' style='max-width:100%;max-height:100%' />";
}
Community
  • 1
  • 1
  • 1
    You should move your edits out to answers (self-answering questions is encouraged). I'd totally vote them up! – Edward Oct 21 '12 at 19:10

0 Answers0