Hello,
we have a page in our NativeScript app that allows the user to check or uncheck some items via Switch components within a ListView and the user should be able to select all or unselect all items in the ListView, so that the corresponding switches will be checked or unchecked.
Unfortunately we notice that the 'isChecked' property of each list item is set correctly, but the state of the Switch is not updated in the UI, unless the user scrolls the 'wrong set' item out of the ListView. Here is a link to a GIF to better understand this description.
Here is what I am doing:
<
GridLayout
rows
=
"auto,auto,*"
>
<
Button
row
=
"0"
text
=
"Select all items"
tap
=
"selectAllSwitchItems"
/>
<
Button
row
=
"1"
text
=
"Unselect all items"
tap
=
"unselectAllSwitchItems"
/>
<
lv:RadListView
row
=
"2"
id
=
"myListView"
items
=
"{{ myItems }}">
<
lv:RadListView.listViewLayout
>
<
lv:ListViewLinearLayout
scrollDirection
=
"Vertical"
/>
</
lv:RadListView.listViewLayout
>
<
lv:RadListView.itemTemplate
>
<
GridLayout
columns
=
"*, auto"
rows
=
"auto"
>
<
Label
text
=
"{{ label }}"
col
=
"0"
/>
<
Switch
col
=
"1"
checked
=
"{{ isChecked }}"
/>
</
GridLayout
>
</
lv:RadListView.itemTemplate
>
</
lv:RadListView
>
</
GridLayout
>
exports.vmConfig =
new
observableModule.Observable({
myItems:
new
observableArrayModule.ObservableArray([
{ label:
"Test"
, isChecked:
true
},
{ label:
"Test"
, isChecked:
false
},
{ label:
"Test"
, isChecked:
true
},
{ label:
"Test"
, isChecked:
true
},
{ label:
"Test"
, isChecked:
false
},
//...
])
});
exports.selectAllSwitchItems =
function
() {
var
list = vmModule.vmConfig.get(
"myItems"
);
for
(
var
i = 0; i < list.length; i++) {
list.getItem(i).isChecked =
true
;
}
myListView.refresh();
};
exports.unselectAllSwitchItems =
function
() {
var
list = vmModule.vmConfig.get(
"myItems"
);
for
(
var
i = 0; i < list.length; i++) {
list.getItem(i).isChecked =
false
;
}
myListView.refresh();
};
The issue occurs only on iOS, on Android this functionality works fine.
My testing environment:
- NativeScript 2.5
- iPhone 4S (iOS 8.4)
Does anybody know what is causing this issue? I am thankful for any advice.
Best regards