Kendo grid column with image from a server

Question

I've got a Kendo grid that displays images correctly on a column if the images are stored in my machine.

@(Html.Kendo().Grid<ProjectName.Models.SomeModel>()
.Name("grid")
.Columns(columns =>
{
    ...
    columns.Bound(c => c.Image).ClientTemplate("<img src='c:/pics/" + "#=Image#' alt='image' Title='image' height='24'/>").Title("Image");
})

So, this correctly displays images that are stored on my local hard drive, in the path c:/pics. But now I need to show images that are stored in a specific server instead of the c:/pics folder in my machine.

I have tried replacing this bit here:

src='c:/pics/"

with these options:

src='\\999.99.99.999\ProjectName\Images\'
src='\\\\999.99.99.999\\ProjectName\\Images\\'
src='http://999.99.99.999/ProjectName/Images/'
src='999.99.99.999/ProjectName/Images/'

But none of them works.

*Note that the 999.99.99.999 is a dummy, I insert the real IP there.

How can I set a source for the image that's an IP address of another machine?

EDIT:

If I have an image tag in any other part of the View, it works fine, like this:

<img src="\\999.99.99.999\ProjectName\Images\somepic.jpg" alt="whatever" />

But inside the ClientTemplate for the column in the grid I get errors with the backslashes, that's why I tried the double backslashes too.

Answer 1

Have you tried to pull the javascript out something like this may work for you:

From this:

columns.Bound(c => c.Image).ClientTemplate("<img src='c:/pics/" + "#=Image#' alt='image' Title='image' height='24'/>").Title("Image");

To This:

columns.Bound(c => c.Image).ClientTemplate("#=GetMyImage(data.Image)#").Title("Image");

Then have a javascript function build up the image for you.

<script>

function GetMyImage(image)
{
 var returnString = 'No Image Found'; 

//just checking to see if we have a name for the image 
if(image !== null && image.length > 0)
{
  returnString = '<img src="{Your server details here}\" + image + '" title="image" height="24" alt="image"/>;

return returnString;  
}
}


</script>

This is usually what I do if I want to do something a bit more creative with the client templating for Kendo grids.