Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Change the color of a clicked Data List row in your web prototypes


In this tutorial, you will learn how to change the color of a clicked Data List row. In the example, every time a row is clicked, a selection feedback is displayed.

You can download the below example here.

Change the color of a clicked Data List row in your web prototypes

1) In a new web prototype, go to the Data Masters tab and create a new data master.

2) Name it ‘test’ and create three fields: a, b and c. Then click OK.

3) Double-click on the Data Master you’ve just created and select the tab ‘View and edit records’. Write some example data there and click OK.

4) Now drag a Data List widget to the screen. Name it ‘tests’ and select the Data Master. Then select all the fields. 

5) 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.

6) Go to the ‘events’ tab 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.

7) 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.

That’s all! You can now click on ‘Simulate’ and enjoy!

Next tutorial > Learn how to use Radio buttons for clear row selection in DataLists

2 Comments

  1. Adrian

    July 31, 2015 at 10:38 pm

    This works just fine if we are using the default alternating row colors. But what if we had custom background colors that were based on the value of a column? On page load I set the Current_Row to different colors depending on category value, giving me a rainbow looking grid. That works just fine, but how can I simulate row selection without loosing the custom colors?

    • Danielle Schneider

      August 1, 2015 at 12:36 am

      Hi Adrian,

      You can use an event using the Current_Row. However, to get a better idea of how this might work, send us your prototype at jim.support@justinmind.com.