Structure Table with Joined Table and Picker Loop

Question

I have 2 questions about a table and a picker:

1. How do I structure this table with joined table like this picture?

2. fetch picker value in colectionview with loop
assuming I have 3 students. If implemented, how to write a loop command to fetch the picker value to Absensi Table?

I created a data collection like the following in xaml.

<CollectionView Margin="-15"   
                x:Name="AbsenList"   
                SelectionMode="Single"   
                VerticalOptions="CenterAndExpand">  
    <CollectionView.ItemTemplate>  
        <DataTemplate>  
            <StackLayout Orientation="Horizontal">  
                <Image Source="{Binding StudentImage}"/>  
                <Label Text="{Binding Name}"/>  
                <Picker Title="Absen" SelectedItem="{Binding Checklist}">  
                    <Picker.ItemsSource>  
                        <x:Array Type="{x:Type x:String}">  
                            <x:String>A</x:String>  
                            <x:String>B</x:String>  
                            <x:String>C</x:String>  
                            <x:String>D</x:String>  
                        </x:Array>  
                    </Picker.ItemsSource>  
                </Picker>  
            </StackLayout>  
        </DataTemplate>  
    </CollectionView.ItemTemplate>  
</CollectionView>  
<Button Text="Save" Clicked="SaveToDatabase"/>  

thank you if anyone answers this question :)

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

If implemented, how to write a loop command to fetch the picker value to Absensi Table?

You can create a property in your item model class to store the selected data, you could pass the selected data to the property in the SelectedIndexChanged event.

You can refer to the following code:

    <CollectionView ItemsSource="{Binding Monkeys}" VerticalOptions="Start">  
        <CollectionView.ItemTemplate>  
            <DataTemplate>  
                <Grid Padding="3">  
                    <Grid.RowDefinitions>  
                        <RowDefinition Height="Auto" />  
                        <RowDefinition Height="Auto" />  
                    </Grid.RowDefinitions>  
                    <Grid.ColumnDefinitions>  
                        <ColumnDefinition Width="1*" />  
                        <ColumnDefinition Width="1*" />  
                        <ColumnDefinition Width="1*" />  
                    </Grid.ColumnDefinitions>  
                    <Image Grid.RowSpan="2"   
                           Source="{Binding ImageUrl}"   
                           Aspect="AspectFill"  
                           HeightRequest="60"   
                           WidthRequest="60" />  
                    <Label Grid.Column="1"   
                           Text="{Binding Name}"   
                           FontAttributes="Bold" />  
                    <Label Grid.Row="1"  
                           Grid.Column="1"   
                           Text="{Binding Location}"  
                           FontAttributes="Italic"   
                           VerticalOptions="End" />  

                  <Picker Title="Absen" Grid.RowSpan="2" Grid.Column="2" SelectedItem="{Binding Checklist}"  SelectedIndexChanged="Picker_SelectedIndexChanged">  
                        <Picker.ItemsSource>  
                            <x:Array Type="{x:Type x:String}">  
                                <x:String>A</x:String>  
                                <x:String>B</x:String>  
                                <x:String>C</x:String>  
                                <x:String>D</x:String>  
                            </x:Array>  
                        </Picker.ItemsSource>  
                    </Picker>  
                </Grid>  
            </DataTemplate>  
        </CollectionView.ItemTemplate>  
    </CollectionView>  

2. Add field Checklist in the item model(my item is Monkey)

   public class Monkey: INotifyPropertyChanged  
   

   {
   private string _Name;
   public string Name
   {
   set { SetProperty(ref _Name, value); }
   get { return _Name; }
   } // add field Checklist
   private string _checklist;
   public string Checklist {
   set { SetProperty(ref _checklist, value); }
   get { return _checklist; }
   }

    public string Location { get; set; }  
    public string Details { get; set; }  
    public string ImageUrl { get; set; }  
   
   
    bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)  
    {  
        if (Object.Equals(storage, value))  
            return false;  
   
        storage = value;  
        OnPropertyChanged(propertyName);  
        return true;  
    }  
   
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)  
    {  
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
    }  
   
    public event PropertyChangedEventHandler PropertyChanged;  
   

   }
3. achieve event SelectedIndexChanged in file yourpage.xaml.cs public partial class VerticalListPage : ContentPage
   {
   public VerticalListPage()
   {
   InitializeComponent();
   BindingContext = new MonkeysViewModel();
   }

    private void Picker_SelectedIndexChanged(object sender, System.EventArgs e)  
    {  
        var picker = sender as Picker;  
   
        var index = picker.SelectedIndex;  
        var list = picker.ItemsSource;  
   
        var model = picker.BindingContext as Monkey;  
        model.Checklist = (string)list[index];  
    }  
   

   }

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.