Show/hide inside a radlistview item


#1

I have to use the radlistview but having issues when I try using multiple buttons for different actions. One of the action is to show and hide parts of the list-item. The issue is other items are randomly showing also even though I am using the id of the button to stop that behavior. Each button has a different id.

I trigger this function to show/hide as needed.

exports.showDetailsToggle = function (args){
    
    var btn = args.object;
    var item = btn.bindingContext;
    var btnID = item.id;//dataset id
    console.dir(item);

    var labelViewItem = btn.getViewById("label_"+btnID); //get the label that shows the font icon
    var stackViewItem = view.getViewById(page,"vis_"+btnID); //get the stackview that has the details
    stackViewItem.visibility = item.showDetails ? 'collapsed' : 'visible'; //show/hide the stackview
    item.showDetails = item.showDetails ? false : true;//set a variable in the dataset that is used for showing and hidding
    labelViewItem.text = item.showDetails ? '\uf106':'\uf107'; //change the font icon

}

xml

<lv:RadListView items="{{ shipments }}" row="1" class="dashboard-list"> 
    <lv:RadListView.listViewLayout>
        <lv:ListViewLinearLayout scrollDirection="Vertical" />
    </lv:RadListView.listViewLayout>
    <lv:RadListView.itemTemplate>
    
        <StackLayout orientation="vertical" width="100%"  id="{{ 'vis_'+id }}" visibility="collapsed">
            //details
        </StackLayout>               

        <StackLayout col="1" class="{{ moreDetailsHolder }}"  id="{{ 'btn_'+id }}">
            <Label text="&#xf107;" class="fa" id="{{ 'label_'+id }}"/>
        </StackLayout>
        
    </lv:RadListView.itemTemplate>
</lv:RadListView>

I also have another issue which could be unrelated but whenever the details of an item are in view and I scroll the list item of the screen the details of the item disappear. I think this might be related to the fact that android loaded a different item in that template container for making the list view render faster with limited memory. Is there a way I could keep my list state and still have android work efficiently? I am not sure if my approach is correct. Is there a better way to do this?