RadListView - How to customize styling of selected items?

[Whip]

Did you verify this is a real problem by searching the NativeScript Forum?

Yes

Tell us about the problem

When I select an item it shows a grey border around the item. How do I change the colors or remove it altogether? I tried setting background: transparent; on all the child items but it didn't have any effect.

Which platform(s) does your issue occur on?

Android 7.1.1

[tsonevn]

HI @VeeK727, I tested your case with our sample project, however, the RadListView does not seems to apply any custom styling, which will change the backgroundColor on itemTap. I would suggest checking if there is some custom added CSS, which can cause the issue. Also, It will help if you send us sample project, which can be used for reproducing the scenario

[Whip]

Can I share it with you privately?

[tsonevn]

Hi @VeeK727, You can send it to me in private message via our community Slack. My nickname is nikts.

[Whip]

Could you explain how to do that. I signed up and it asked me to create a workspace. But I still can't login to your given link. Also I can't find you from the PM search in the left sidebar.

[tsonevn]

You can find more about joining workspace in Slack here.. Also, here you will find, how to send a direct message.

[Whip]

Sorry to bother you but I can't make it work. I follow the help section, but there's no way its showing noativescript's workspace. I think you need an invitaion to do that. I also can't find you for sending DM with nikts username. Can you provide another method?

[Whip]

Sent

[tsonevn]

Hi @VeeK727, The changed your case and found that the change of the background color when an item is selected is something expected while the RadListView's multipleSelection option is enabled. To solve this, you can set up a root container with a custom background for each item as it is shown in the example here.

[Whip]

Hi @tsonevn , sorry for the late reply. I already had a root container with a class that applies transparent background. In fact, I tried to apply it on every element and the background color still showed up. THats what confused me the most.

Anyways I tried your idea too, but that didn't work either. DId it work for you?

<lv:RadListView items="{{ purities }}" selectionBehavior="Press" multipleSelection="true" itemSelected="onItemSelected" itemDeselected="onItemDeselected" id="selectionList">
    <lv:RadListView.listViewLayout>
        <lv:ListViewGridLayout scrollDirection="Vertical" spanCount="2" />
    </lv:RadListView.listViewLayout>

    <lv:RadListView.itemTemplate>
        <GridLayout rows="auto,auto" class="m-r-10 m-b-10 bg-trans" backgroundColor="{{ selected ? 'red' : 'transparent' }}"> //red color didn't show up
             ...
        </GridLayout>
    </lv:RadListView.itemTemplate>
</lv:RadListView>

[tsonevn]

Hi @VeeK727, I noticed that you are setting up margins to the main GridLayout, that might take effect in setting up the background. Regarding that, you can try setting up a StackLayout, where you can define the colour:

<lv:RadListView items="{{ purities }}" selectionBehavior="Press" multipleSelection="true" itemSelected="onItemSelected" itemDeselected="onItemDeselected" id="selectionList">
    <lv:RadListView.listViewLayout>
        <lv:ListViewGridLayout scrollDirection="Vertical" spanCount="2" />
    </lv:RadListView.listViewLayout>

    <lv:RadListView.itemTemplate>
          <StackLayout backgroundColor="white">
        <GridLayout rows="auto,auto" class="m-r-10 m-b-10 bg-trans" > //red color didn't show up
             ...
        </GridLayout>
           </StackLayout>
    </lv:RadListView.itemTemplate>
</lv:RadListView>

[Whip]

That worked. Thanks a lot.