.svg)
Chapter 10 — Display Images in Your DataGrid
In this chapter, you’ll learn how to display images stored in your internal database using the DataGrid component. You’ll also learn how to adjust the display settings to ensure the images are shown correctly within the table layout.
3 min
Add the DataGrid Component
Start by dragging and dropping the DataGrid component onto your page.
Connect to the Database
- Click on the DataGrid to open its Settings.
- Choose Get Data, then click on Configure.
- Select the correct database (e.g., ChateauDB) and choose the relevant table.
- Click “Include” to deselect all default columns.
- Select the specific columns you want to show:
- EmployeeName
- MoodScore
- FeedbackComment
- Image (this column should contain image URLs or base64 data)
Click Validate to confirm.
Preview the Result
- Click Preview.
- You will now see the data displayed in the DataGrid — including the images.
- However, images might appear too large by default.
Adjust the Grid to Fit the Images
To fix the image sizing:
- Go back to the DataGrid Settings.
- Click on the Advanced mode toggle (the “A” icon at the top right, which will switch to “S”).
- In Advanced Settings, make the following changes:
- ✅ Set Make columns fit the grid with no horizontal scrolling to True.
- Ensure Allow column width to be based on cell content (may cause scrolling) is disabled.
Click Validate once done.
Final Preview
Return to Preview mode.
Your DataGrid should now display the images at the right size, fitting cleanly within the layout — no horizontal scrolling needed.