# Give focus to a Each element

**URL:** <https://forums.fusetools.com/t/give-focus-to-a-each-element/5884>\
**Category:** How-to Discussions\
**Created:** [October 13, 2015, 6:25pm UTC](https://forums.fusetools.com/t/give-focus-to-a-each-element/5884 "2015-10-13T18:25:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [October 13, 2015, 6:25pm UTC](https://forums.fusetools.com/t/give-focus-to-a-each-element/5884/1 "2015-10-13T18:25:53Z")

</div>

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

```auto
<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!

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [October 13, 2015, 8:55pm UTC](https://forums.fusetools.com/t/give-focus-to-a-each-element/5884/2 "2015-10-13T20:55:45Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [October 13, 2015, 9:06pm UTC](https://forums.fusetools.com/t/give-focus-to-a-each-element/5884/3 "2015-10-13T21:06:14Z")

</div>

EDITED