By Chapter 2:
Display movies in a Data Grid
Now that we’ve set up our Data Table and populated it with some movie information, we can display the contents of our Data Table in a Data Grid.
Step 1: Add a Data Grid
We’ll now build the UI for displaying movies. Open the MovieList Form and add a Label from the Toolbox to the title area and change its text property to “My Favorite Movies”. Then drag a Data Grid onto the main part of the Form.
tonal-data-grid in the Properties Panel.Your Form should look like this:
Step 2: Set up the Data Grid
We need to set up the Data Grid to display data from the Data Table and tell it which columns to display.
We need columns for the name of the movie, the year it was released, and the name of the director. The plot summary is a longer piece of text so will need to be handled differently.
Click on the column header to select Column 1. In the Properties Panel, find the data_key and title properties. The title is what will be displayed as the column header. Change the first column’s title to “Movie Name”. The data_key is the name of the Data Table column used for data binding. Set the data_key to movie_name.
For the second column, the data_key should be director and the title should be “Director”. The third column should use year for data_key and “Year” for title. Since the year will not take up much room, set its width property to 100. The final result should look like this:
titles and data_keys.Step 3: Populate the Data Grid from the Data Table
When you drag and drop a Data Grid onto your Form, Anvil creates several components for you. Inside your Data Grid is a RepeatingPanel, and inside that are DataRowPanels - one for each item in the RepeatingPanel.
Dropping a Data Grid into your app creates this component structure
To display items in our Data Grid, we need to populate the internal RepeatingPanel. In the init method of MovieList, set the RepeatingPanel’s items property to the contents of the movies Data Table:.
def __init__(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
self.repeating_panel_1.items = app_tables.movies.search()Click the green Run button at the top of the Editor to run the app. You should see the one movie in the Data Table displayed in the Data Grid:
Great! We’ve now set up our Data Grid.
In Chapter 3, we’ll create a UI that allows users to add more movies to the Data Grid.