Highlighting the selected row of a Data List

With Justinmind, you can change the color of a clicked Data List row. In our example, each time the user clicks on a row, the row will change color to signal that it’s selected.Change the color of a clicked Data List row in your web prototypes
To highlight the selected row in Data List, follow these steps:

  1. In a new web prototype, go to the Data Masters palette and create a new data master. Name it “Example” and create two fields: “Name” and “Surname” and click “OK”. Double-click on the Data Master you’ve just created and select the “View and edit records” tab. Write some example data there and click “OK”.
  2. Drag a Data List widget to the Canvas. Name it “Names” and select the Data Master you just created and all of its fields to populate the Data List.
  3. Select “Current_row_1” of the Data List and create an “On Click” + “Change Style” event, selecting the Data List as the target of the action. Select the background even and odd colors as styles to change, but leave their default colors.Leave background color as default
  4. Look back to the Events palette and create another “Change Style” event, this time selecting Current_row_1 as the target of the action. For the style, choose another color for the background of the row.Select current row 1 background color

And that’s all! Click “Simulate” to interact with your prototype.

You can download our example here.