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

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.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.
   )

   C#

       public ActionResult RenderPhoto(int photoId)
       {
           byte[] photo = FetchPhotoFromDb(photoId);
           return File(photo, "image/png");
       }
   
       private static byte[] FetchPhotoFromDb(int photoId)
       {
           // Fetch image from database.
           return byteImages[photoId];
       }
   
       public static List<byte[]> byteImages = readFiles(new List<byte[]>());
   
       private static List<byte[]> readFiles(List<byte[]> byteImages)
       {
           // Get file paths (can be stored in DB).
           string[] filePaths = Directory.GetFiles(HostingEnvironment.MapPath("~/Areas/GridRenderAndPreviewByteAndBase64Images/Content/icons/"));
   
           foreach (string filePath in filePaths)
           {
               using (Image currentImage = Image.FromFile(filePath))
               {
                   byteImages.Add(ImageToByteArrayConverter.imageToByteArray(currentImage));
               }
           }
   
           return byteImages;
       }

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

• ASP.NET MVC Grid Documentation
• ASP.NET MVC Grid Demos
• ASP.NET MVC Grid Product Page
• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik UI for ASP.NET MVC Knowledge Base