Style specific Index item in a ListView, Hide specific Index item in a ListView

[sprodduturi]

Related post but unclear. Image Grid styleByIndex? - #5 by Kabirdas

Hey all,

Appreciate your effort in addressing the issues and helping people. Could you please help me in the below Issues.

Issue-1
I have a listView that has images rendering in it from a data source. so when I click on a particular image I would just like to add a border to just that image so the user understands he selected the particular image from the listView. Could you please let me know how to do it ?

Issue-2
I have a listView1 that contains an action button1 and a listview2 in it. When the user clicks on the action button1 I want to hide the listview2. currently I implemented it using a localStore variable that toggles the hidden property of listview2 so when I click on button1 it hides/unhide the listview2 in all of the components of listView1. I just want to hide/unhide the listview2 in the specific clicked component of listView1.

I hope the description of issues is clear. Please let me know if you need more info. Thanks in advance.

[joeBumbaca]

Hey @sprodduturi, both of these are achieved using the listview row index denoted as i in the app.

1. Add border to selected image:

First define a temporary state variable. Then set an event handler on the image component in the listview, setting it's value to {{ i }}:

Next we can alter the Border color style property of the image. Checking to see if the variable value is equal to the current index. We can supply two hex codes ( I chose white for false to imply no border).

2. Set the Hidden property to a conditional, checking the same variable against the current row index:
   

I've combined both functionalities into one listview here.

Upon app load, no borders and all nested listviews are visible:

Selecting the second image adds a border and hides the nested listview in the second row:

Hope this helps!

[sprodduturi]

Thank you. I was able to get both of those working. Thanks again for the solutions.

[joeBumbaca]

Awesome! Glad to hear it