New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Display and Preview Byte and base64 Images in Grid Using a Window

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.1.227

Description

How can I display Byte and base64 images in the Grid and preview them by using a Window component?

Solution

The solution relies on the following key steps:

  1. Use the ClientTemplate() option to display the images in the respective column cell:

    Razor
    @(Html.Kendo().Grid<Order>()
        .Name("Grid")
        .HtmlAttributes(new { style = "heigth:600px;"})
        .Columns(columns => {
            columns.Bound(p => p.Image)
                .ClientTemplate("<img src='" + @Url.Action("RenderPhoto", "Home", new { photoId = "#=OrderID-1#" }, @Request.Url.Scheme) + "' class='imgLink' />")
                .Title("Byte array images");
            columns.Bound(p => p.Image64)
                .ClientTemplate("<img src='data:image/png;base64,#=Image64#' class='imgLink' />")
                .Title("Base64 Images");
        })
        ...// Additional configuration.
    )
  2. Initialize a Window component with jQuery and handle the click event of the img elements in the Grid column templates:

    js
        $(function () {
            $("#window").kendoWindow({
                width: "600px",
                title: "Image preview",
                visible: false
            });
    
            $("#Grid").on("click", ".imgLink", showImage);
        });
    
        function showImage() {
            imgTag = "<img src='" + this.src + "' />";
            windowElement = $("#window").data("kendoWindow");
            windowElement.content(imgTag); // Update the Window's content based on the clicked image.
            windowElement.setOptions({
                width: 320,
                height: 320
            });
            windowElement.center();
            windowElement.open(); // Open the Window.
        }

To review the complete example, refer to the project on how to render byte and base64 images in the Grid and preview them using a Window when working with the Kendo UI Grid in ASP.NET MVC applications.

More ASP.NET MVC Grid Resources

See Also