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

  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