MVC Grid Ajax Binding - Zoom image ouside the cell

[Aarti]

Hi,

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
<script>
    function MyFunction()
    {
        $(document).ready()
        {
         $("#GridTable tbody tr td #wrap #Grid .k-grid-content table tbody tr td text img").hover(function() {
             kendo.fx(this).zoom("in").startValue(1).endValue(2).play();
         }, function() {
            kendo.fx(this).zoom("out").endValue(1).startValue(2).play();
        });
        }
    }
</script>

[Vladimir Iliev]

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 () {
    $("#Grid").kendoGrid({
        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 () {
    MyFunction();
});

3) Additional JavaScript:

function MyFunction() {
    var windowElement = $("#window").kendoWindow({
        width: "600px",
        title: "Image preview",
        visible: false
    }).data("kendoWindow");

    $("#Grid .imgLink").hover(function () {
        showImage(this, windowElement);
    }, function () {
        windowElement.close();
    });
}

function showImage(img, windowElement) {
    imgTag = "<img src='" + img.src + "' />";

    windowElement.content(imgTag);
    windowElement.setOptions({
        width: 320,
        height: 320
    });
    windowElement.center();
    windowElement.open();
}

Kind Regards,
Vladimir Iliev
Telerik