I noticed this yesterday when I was working on my application. I currently need to serve all static content from another URI context than the one that actually generates the page with SlickGrid. It seems like this wouldn't be that unusual a thing to do, so I suggest adding an option that can be used to specify the base location of static resources.
I've currently hacked in this support with the patch below, but you might be able to come up with something more elegant.
diff --git a/slick.editors.js b/slick.editors.js
index 1654666..f67cfdf 100644
--- a/slick.editors.js
+++ b/slick.editors.js
@@ -32,13 +32,13 @@ var YesNoCellFormatter = function(row, cell, value, columnDef, dataContext) {
};
var BoolCellFormatter = function(row, cell, value, columnDef, dataContext) {
- return value ? "<img src='../images/tick.png'>" : "";
+ return value ? "<img src='" + Slick.imageLocation + "/tick.png'>" : "";
};
var TaskNameFormatter = function(row, cell, value, columnDef, dataContext) {
// todo: html encode
var spacer = "<span style='display:inline-block;height:1px;width:" + (2 + 15 * dataContext["indent"]) + "px'></span>";
- return spacer + " <img src='../images/expand.gif'> " + value;
+ return spacer + " <img src='" + Slick.imageLocation + "/expand.gif'> " + value;
};
var ResourcesFormatter = function(row, cell, value, columnDef, dataContext) {
@@ -48,14 +48,14 @@ var ResourcesFormatter = function(row, cell, value, columnDef, dataContext) {
return "";
if (columnDef.width < 50)
- return (resources.length > 1 ? "<center><img src='../images/user_identity_plus.gif' " : "<center><img src='../images/user_identity.gif' ") +
+ return (resources.length > 1 ? "<center><img src='" + Slick.imageLocation + "/user_identity_plus.gif' " : "<center><img src='" + Slick.imageLocation + "/user_identity.gif' ") +
" title='" + resources.join(", ") + "'></center>";
else
return resources.join(", ");
};
var StarFormatter = function(row, cell, value, columnDef, dataContext) {
- return (value) ? "<img src='../images/bullet_star.png' align='absmiddle'>" : "";
+ return (value) ? "<img src='" + Slick.imageLocation + "/bullet_star.png' align='absmiddle'>" : "";
};
@@ -192,13 +192,11 @@ var DateCellEditor = function($container, columnDef, value, dataContext) {
}
$input.appendTo($container);
- $input.focus().select();
- $input.datepicker({
- showOn: "button",
- buttonImageOnly: true,
- buttonImage: "../images/calendar.gif"
- });
+ this.dp_options.onClose = function() { this.focus(); };
+ this.dp_options.buttonImage = Slick.imageLocation + "/calendar.gif"
+ $input.datepicker(this.dp_options);
$input.width($input.width() - 18);
+ $input.focus().select();
};
@@ -236,6 +234,11 @@ var DateCellEditor = function($container, columnDef, value, dataContext) {
this.init();
};
+DateCellEditor.prototype.dp_options = {
+ showOn: "button",
+ buttonImageOnly: true
+};
+
var YesNoSelectCellEditor = function($container, columnDef, value, dataContext) {
var $select;
var defaultValue = value;
@@ -572,7 +575,7 @@ var StarCellEditor = function($container, columnDef, value, dataContext) {
}
this.init = function() {
- $input = $("<IMG src='../images/bullet_star.png' align=absmiddle tabIndex=0 title='Click or press Space to toggle' />");
+ $input = $("<IMG src='" + Slick.imageLocation + "/bullet_star.png' align=absmiddle tabIndex=0 title='Click or press Space to toggle' />");
if (defaultValue)
$input.css("opacity", 1);
diff --git a/slick.grid.js b/slick.grid.js
index ac1d139..b2bb171 100644
--- a/slick.grid.js
+++ b/slick.grid.js
@@ -1339,5 +1339,5 @@
}
// Slick.Grid
- $.extend(true, window, { Slick: { Grid: SlickGrid }});
+ $.extend(true, window, { Slick: { Grid: SlickGrid, imageLocation: "../images" }});
})();