This is a migrated thread and some comments may be shown as answers.

MVC Grid Ajax Binding - Zoom image ouside the cell

1 Answer 96 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Aarti asked on 17 Mar 2014, 07:11 PM

I have used kendo mvc grid with ajax binding. One of the column of grid has small size thumbnails. when I hover on those thumbnails they should get expanded(zoom in zoom out) outside the cell so it does not affect row height.

i have used below javascript function and i am calling it  on onmouseover event of img tag inside clienttemplate, but it expands images inside cell. I want it outside the cell. Can you please let me know how i can achieve it without using lightbox or jquery hoverintent plugins
    function MyFunction()
         $("#GridTable tbody tr td #wrap #Grid .k-grid-content table tbody tr td text img").hover(function() {
         }, function() {

1 Answer, 1 is accepted

Sort by
Vladimir Iliev
Telerik team
answered on 20 Mar 2014, 08:03 AM
Hi Aarti,

Basically the desired behavior requires custom solution which depends entirely on you and the exact setup that you have. For example in the "hover" event you can open Window widget and load the image zoomed inside it as demonstrated below:

1) Grid column:
$(function () {
        columns: [{
            title: "Base64 Images",
            template: "<img src='data:image/png;base64,#=Image64#' class='imgLink' />",
            field: "Image64"

2) DataBound event of the Grid:
$("#Grid").data("kendoGrid").one("dataBound", function () {

3) Additional JavaScript:
function MyFunction() {
    var windowElement = $("#window").kendoWindow({
        width: "600px",
        title: "Image preview",
        visible: false
    $("#Grid .imgLink").hover(function () {
        showImage(this, windowElement);
    }, function () {
function showImage(img, windowElement) {
    imgTag = "<img src='" + img.src + "' />";
        width: 320,
        height: 320

Kind Regards,
Vladimir Iliev

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

Asked by
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question