Visibility via binding is not triggered for elements inside ListView item templates

The scenario: We have a ListView or RadListView with similar item template

<StackLayout height="80" class="m-10 p-10" backgroundColor="gray" orientation="vertical">
    <Label  text="{{ id + ' tap to change the visibility of the second label'}} " backgroundColor="white"/>
    <Label text="{{ name }}" visibility="{{ status+id ? 'visible' : 'collapsed' }}" backgroundColor="blue"//>
</StackLayout>

On itemTap, we are changing the boolean status to true. The binding is set successfully - however, the Label remains collapsed.

Test application to fully reproduce this case can be found here.

Steps to reproduce:

• open the application - a ListView will load showing only the first Label from each item template.
• on itemTap the visibility should change to visible, but in fact, it will remain collapsed.

Reported via t.1114737

[NickIliev]

@vegeorgi , @sitefinitysteve

To change the visibility for items inside ListView item template we can create Observable objects with our desired properties and callbacks and bind directly to them. Doing that will assure that we are working with the proper context (when accessing this in JavaScript) in our ListView templates .

In the list view item template this is the current item so we can create an observable object with the wanted properties and callbacks and this way we won’t need to access parent binding in order to work with a callback from the global context.
With this approach, we also won’t have to worry about creating multiple unique properties for each item as we would directly access the current object.

For example:

import { Observable } from 'data/observable';

// our observable item with text property and isItemVisible callback
class Item extends Observable {

    constructor(public text: string, public isItemVisible: boolean) { 
        super();
    }

    public toggleVisibility(args) {
        // console.dir(this);

        this.set("isItemVisible", !this.isItemVisible);
        console.log("toggleVisibility value: " + this.isItemVisible);
    }
}

export class HelloWorldModel extends Observable {

    public items: Array<any>;

    constructor() {
        super();
        
        // the source array
        this.items = [
            new Item("1", true),
            new Item("2", true),
            new Item("3", true),
            new Item("4", true),
        ]
    }
}

XML file

<ListView items="{{ items }}" height="500" loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
	<ListView.itemTemplate>
		<StackLayout>
                         <!-- now we can access the callback of the current observable item as `this` is the current item (with text, isItemVisible properties and toggleVisibility callback) -->
			<Label text="{{ text }}" textWrap="true" />
			<Button text="tap" tap="{{ toggleVisibility }} " /> 
			<Label text="hide/show" visibility="{{ isItemVisible ? 'visible' : 'collapsed' }}" textWrap="true" />

		</StackLayout>
	</ListView.itemTemplate>
</ListView>

Full demonstration application can be found here.

Note: On iOS, the list view cells won’t be remeasured dynamically when the visibility is changed (by design). That means that we can only show/hide the content via visibility but without remeasuring the item cell. On Android, by design, the cells will be remeasured.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.