Give focus to a Each element

How-to Discussions
1

Hi, in my app I have 2 Each element like this:

<Panel Ux:Name="Header">
    <Each Items="{List}">
        <Rectangle Height="30." CornerRadius="5" Margin="8,0,0,0">
        <Text Alignment="Center" Padding="10,5" Value="{Hour}" FontSize="16" TextColor="#fff" Font="Bold" />
            <SolidColor Color="#777" />
        </Rectangle>
        <Clicked>
        </Clicked>
    </Each>
</Panel>

<ScrollView>
    <StackPanel>
        <Each Items="{List}">
            <Rectangle List="30." CornerRadius="5" Margin="8,0,0,0">
            <Text Alignment="Center" Padding="10,5" Value="{Hour}" FontSize="16" TextColor="#fff" Font="Bold" />
                <SolidColor Color="#777" />
            </Rectangle>
            <Text Value="{Description}" />
        </Each>
    </StackPanel>
</ScrollView>

I like that when I click in one of the Each element of the header GiveFocus to the Each element of the ScrollView that contain the same {Hour}.

There is any way to achieve this?

Thanks!

2

If i understand correctly: you want to give focus to an element based on some databinding?

You can do this by binding the Name property, here is an example (click the buttons to focus the corresponding textinputs:

<App Theme="Basic">
    <Grid ColumnCount="2" Background="Red">
        <JavaScript>
            var Observable = require('FuseJS/Observable');

            var lists = Observable("name1", "name2", "name3");

            module.exports = {
                lists: lists
            };
        </JavaScript>

        <ScrollView Width="50%" Alignment="Left" Height="400">
            <StackPanel Background="#44f">
                <Each Items="{lists}">
                    <Button Height="50">
                        <Clicked>
                            <GiveFocus Target="{}"/>
                        </Clicked>
                    </Button>
                </Each>
            </StackPanel>
        </ScrollView>
        <ScrollView Width="50%" Alignment="Right" Height="400">
            <StackPanel Background="#f44">
                <Each Items="{lists}">
                    <TextInput Name="{}" Value="foo"/>
                </Each>
            </StackPanel>
        </ScrollView>
    </Grid>
</App>
3

EDITED