[Solved] image tooltip in mvc grid

[Howard]

I have got a grid with ajax binding and one column bound with a picture file as a thumbnail.

columns.Bound(f => f.PICTURE_FILE).Title("").ClientTemplate("<div id='thumbnail'><img alt='<#= PICTURE_FILE#>' src='" + Url.Content("~/Content/Pictures/<#= PICTURE_FILE#>") + "' width='40' height='40'/></div>")

When the user hovers around the image, is there a way to provide a tooltip with full image size? I'm new to jquery and have browsed through many jquery tooltips from the web with no luck. Can you please provide a working example?

Thank you

[Dimo]

Hello Howard,

I am afraid your request about providing a working example is a little out of scope of our support service, as it is not related to the MVC Grid component.

Since the Grid does not provide such a tooltip functionality, you either have to implement it, or use some third-party library. In either case, if you need to add some attributes to the image (e.g. CSS classes or onmouseover attribute), you can do so in the client template.

I suggest you to implement the desired functionality with a test image outside the Grid and then integrate the code in the component. If you have any questions at that final step, let me know.

Regards,
Dimo
the Telerik team

[Howard]

Thank you Dimo for the reply.

As you suggested, I tried to implement the desired functionality with a test image outside the Grid which worked, but when I implemented the same in Telerik MVC grid, its not working. This is the code I'm using.

<script type="text/javascript" language="javascript">
       $(document).ready(function () {
    $("#thumbnail img").hover(function (e) {
        $("#large").css("top", (e.pageY + 5) + "px").css("left", (e.pageX + 5) + "px").html("<img src=" + $(this).attr("alt") + " alt='Large Image' /><br/>" + $(this).attr("rel")).fadeIn("slow");
    }, function () {
        $("#large").fadeOut("fast");
    });
});
</script>

<style>
img {
    border: none;
}
#thumbnail img {
    cursor: pointer;
}
#large {
    display: none;
    position: absolute;
    padding: 5px;
}
</style>

@* outside the grid (works) *@
<div id='thumbnail'><img alt='/Content/Pictures/001.jpg' src='/Content/Pictures/001.jpg' width='40' height='40'/> <div id="large"></div></div>

@* inside the grid (doesn't work) *@

 @(Html.Telerik().Grid<SelectModel>()
            .Name("List")
            .Sortable(sorting => sorting.Enabled(true))
            .Pageable(paging => paging.Enabled(true).PageSize(Rows))
            .Footer(true)
            .DataBinding(dataBinding => dataBinding.Ajax().Select("_List", "Controller"))
            .DataKeys(keys => keys.Add(f => f.ID))
            .Filterable(filtering => filtering.Enabled(true))
            .Reorderable(reorder => reorder.Columns(true))
            .Columns(columns =>
                {
                    columns.Bound(f => f.PICTURE_FILE).Title("").ClientTemplate("<div id='thumbnail'><img alt='" + Url.Content("~/Content/Pictures/<#= PICTURE_FILE#>") + "' src='" + Url.Content("~/Content/Pictures/<#= PICTURE_FILE#>") + "' width='40' height='40'/><div id='large'>p</div></div>")
 })
)

Please let me know, if I need to change anything.

Regards

[Dimo]

Hi Howard,

You need to change the selector, which currently does not target any images inside the Grid:

$("#thumbnail img").hover( ... );

All the best,
Dimo
the Telerik team

[Howard]

Hi Dimo,

Can you provide a small example for this one please?

Thank you

[Dimo]

Hi Niroj,

It will be better if you provide a runnable demo of your current implementation and explain what seems to be the problem. I will modify it, so that it starts working and send it back.

Regards,
Dimo
the Telerik team

[Howard]

Dear Dimo,

I've attached the workable project as requested. please let me know how to fix this one.

Thank you

[Dimo]

Hi Niroj,

Your implementation does not work due to a number of issues:

1. The hover event handlers are attached in document ready. At this moment the Grid is not databound yet, so there are no images on the page. Do this in the Grid's OnDataBound event.

2. There are IDs in the repeating Grid client templates, which leads to multiple elements on the page with the same ID. This is both invalid in terms of HTML standards and breaks Javascript code. Use CSS classes instead.

3. The Javascript code that shows and positions the large images uses selectors that do not identify one particular large image, but all of them. You need to reference only the large image that is inside the same table cell as the hovered image.

4. Finally, the Grid has a position:relative style applied by default, in order to avoid an IE rendering bug related to scrolling. This style must be taken into account when positioning the large images. You either need to set a position:static style (test in IE) or you have to substract the Grid's top and left offset from the tooltip's position.

Please note that issues 2 and 3 above are related to general knowledge and are a little out of scope of our support service.

Regards,
Dimo
the Telerik team

[Howard]

Thank you Dimo for your reply. I've changed the solution talking your points in mind. I've accomplished most of the functionality. the only remaining bit is the tooltip is not displaying where it should be. I've attached the demo solution. Please let me know

thank you

[Dimo]

Hello Niroj,

#imagePopupContent lacks a position:absolute style.

I kindly recommend you to inspect and debug more thoroughly.

Greetings,
Dimo
the Telerik team

[Howard]

Thanks Dimo for your help so far. With your help and suggestions, I finally managed to get it to work. I was missing a "<" sign in front of a div container. Thank you for your patience as well.

Cheers