Highlighting the selected row of a Data List
With Justinmind, you can change the color of a clicked Data List row. In our example, every time a row is clicked, a selection feedback is displayed.
To highlight the selected row in Data List, follow these steps:
- In a new web prototype, go to the Data Masters palette and create a new data master.
- Name it “test” and create three fields: a, b and c. Then 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”.
- Now drag a Data List widget to the screen.
- Name it “tests” and select the Data Master.
- Then select all the fields.
- Place the mouse cursor at the left of the row until it turns into an arrow pointing to the right, then click.
- That way you’ve selected the entire row.
- Go to the Events palette and add an “On Click” + “Change Style” event.
- In the Events dialog, select the entire Data List and then select “background”, leaving the colors as they are.
- Click “OK”.
- Now click on the arrow icon next to the word “do” and select “add action”.
- Add another “Change Style” event, this time selecting the blue color for the background of that row.
- Click “OK”.
And that’s all! Click “Simulate” to interact with your prototype.
You can download our example here.