Image preview

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

  1. Create new REST data source with name JSONPlacehodler, endpoint, schema and resources

  2. Create Images page, set it as start page, add load event to invoke getPhotos method of the JSONPlacehodler data source and set property photos to the result

  3. Drop DataGrid component to Radzen design surface, bind it to photos property set AllowPaging to true and auto-generate columns

  4. Defined template with image for thumbnailUrl column
    <img src='${data.thumbnailUrl}'>

  5. Defined template with button for Url column and change the column title to Preview
    <button (click)='showPreview(data)'>Show preview</button>

  6. Create Image page, exclude it from navigation, add load event to invoke getPhotoById method of the JSONPlacehodler data source with parameter id equal to ${} and set property photo to the result

  7. Drop HTML component to Image page, and defined content to display image
    <img src="{{photo?.url}}">

  8. Run the application

  9. Open [APP FOLDER]\client\src\app\images\images.component.ts with your favorite code editor and add showPreview method
    showPreview(data: any) {
      this.router.navigate([{ outlets: { popup: ['image', { id: } ] } } ], 
     { queryParams: { width: 700, height: 700 } });

  10. Run the application and click Preview button in DataGrid rows

Get Radzen

Sign-up to download the free 30-day Radzen trial.