New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
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:
-
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. )
-
Initialize a Window component with jQuery and handle the
click
event of theimg
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