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
Grid
This is a migrated thread and some comments may be shown as answers.
Aarti
Top achievements
Rank 1
Aarti asked on 17 Mar 2014, 07:11 PM
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>



1 Answer, 1 is accepted

Sort by
0
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 () {
    $("#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
 

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

 
Tags
Grid
Asked by
Aarti
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or