Image preview

This guide demonstrates how to display images in DataGrid and how to open a popup from a button in column template.

Source Code

  1. Create new OData data source with name Northwind and endpoint https://services.radzen.com/odata/Northwind

  2. Start Create New Page wizard, select CRUD Pages template, choose Employee for Page Schema

  3. Set template for Photo column
    <img width='50%' height='50%' src='${data.Photo}' />
    

  4. Create Image page, exclude it from navigation, add load event to invoke getEmployeeById method of the data source with parameter EmployeeID equal to ${parameters.EmployeeID} and set property employee to the result

  5. Drop Image component to Image page, and defined path to ${employee.Photo}

  6. Add new Preview column to the DataGrid with button to open Image page

  7. Run the application

Get Radzen