SlickGrid icon indicating copy to clipboard operation
SlickGrid copied to clipboard

Possibility of replacing the images directory with Data URIs

Open nisharobinson opened this issue 7 years ago • 5 comments

Sometimes when using SlickGrid I'll run into issues with pathing such as CheckFormatter, the default code for CheckFormatter is:

function CheckmarkFormatter(row, cell, value, columnDef, dataContext) { return value ? "<img src='../images/tick.png'>" : ""; }

A way around this would be to use Data URIs and I feel like this would increase the portability of SlickGrid a lot, example:

function CheckmarkFormatter(row, cell, value, columnDef, dataContext) { return value ? '<img alt="tick" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABq0lEQVQ4y72T2S5DYRSFe+c472Ju1RhTQqqGVCfq6ClFKY0bqqetVqtDSgzHpRhqjsQUlCASl1rVhmcQL6G6/JVowoUYEhf/3b/W3vvbawsACP7yBP9uoF5r4luW6p2/MlCtNvKmYz36D1hI+CruRwbKYAM/eNSF2Xs3vDdW6LbUqPAU2b4lVqxIeeOhDtNxF6biTnRut6LSW4wSh5BKfzJesjWGM6bns1i+LOVTLU/GnAjEHG+Vy93iRPFYAZUewXjBlvWeMk/ctQnsrnLoXUxg8X37WgTuxuC/s4PdVKHMVZgosudTaYj959ra3lD7oy/MYTo2Ds2WLEFgDckWJVOGPQa+qB3eWw4dGwqUjosSYlse9WGNPSeaTP1hG8xXA5h78MAbtsJ4pIPpRI+JsAXuWwuYdTlKnMKXQutHcXoEZkdOk8owhfRvc/qjNrgiZrjCZmjWWlKwkiIul/oySAQWLVuQoHu3He7IKBw3w2gLykBgJUWWHOpbSZTMV9N1M5WkZQXUK80gsJLC0WzqR1Em+6XLJ8QgsJ4LzNkZv7oFAovOH8nK+JdrfAW+oqk8UgoDSAAAAABJRU5ErkJggg==" />' : ""; }

nisharobinson avatar Jun 22 '18 18:06 nisharobinson

I would suggest you to create and use your own Custom Formatter. There might not be enough documentation on the subject but it's easy enough to extend Formatter with your own ones. Here's an Example with custom formatter. In the case of the checkmark, I have my own custom formatter using Font-Awesome icons. We all have different implementations and that is the beauty of SlickGrid, almost everything is customizable

ghiscoding avatar Jun 22 '18 18:06 ghiscoding

@ghiscoding I'm familiar with most of SlickGrid at this point and I definitely could make a Customer Formatter, I just think it would be nicer if SlickGrid worked a little better "out of the box" so to speak. Relative paths don't work so well.

nisharobinson avatar Jun 22 '18 18:06 nisharobinson

The more I think about this, the more I like the idea. As long as we keep the original icon available and keep the relative path line commented in the formatter, this would provide a number of advantages. Any disadvantages you can think of @ghiscoding ? It's not going to stop customisation.

I always notice that the image paths break whenever I put SlickGrid into a real life project.

6pac avatar Jun 25 '18 00:06 6pac

Sure I wouldn't mind seeing a PR so that we can test with. I personally don't use any of the images since I use Font Awesome icons instead but yeah bringing more options is always great. The other benefit would be a much smaller library if we don't need to include images. So sure, that does seem like an improvement.

ghiscoding avatar Jun 25 '18 02:06 ghiscoding

Yeah, the next logical step is 'skinning', but I'm happy to leave that to someone else to develop!

6pac avatar Jun 25 '18 02:06 6pac

in SlickGrid 5.0 we replaced all images with SVG Icons and if you are wondering why we chose SVG instead of Data URI, you could read this article for the main reasons Probably Don’t Base64 SVG

see SlickGrid 5.0 Announcement & Migration

ghiscoding avatar Sep 19 '23 18:09 ghiscoding