Grial-UI-Kit-Support icon indicating copy to clipboard operation
Grial-UI-Kit-Support copied to clipboard

How can programmatically refresh one "grial:Repeater"

Open marketdevsoft opened this issue 2 years ago • 6 comments

Hi, in my view i have put this repeater:

            <grial:Repeater 
                Orientation="Horizontal"
                Spacing="20"
                SelectionMode="Single"
                SpacingMode="Arround"
                HorizontalOptions="CenterAndExpand"
                ScrollBarVisibility="Never"    
                InitialSelection="First"
                ItemsSource="{Binding ListActionButton}"
                SelectedItem="{ Binding ActionSelected, Mode=TwoWay }"
                >
                <!--DEFAULT ITEM TEMPLATE-->
                <grial:Repeater.ItemTemplate>
                    <DataTemplate>
                        <Grid VerticalOptions="FillAndExpand" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition Height="auto"></RowDefinition>
                            </Grid.RowDefinitions>

                            <!-- Icona -->
                            <local:RoundedImage Grid.Row="0"
                                            CornerRadius="7"
                                            BorderColor="{DynamicResource BasePageColor}"
                                            BorderSize="5"
                                            Source="{ Binding IconSource }" 
                                            Style="{ StaticResource Avatar }"                    
                                            HorizontalOptions="CenterAndExpand"
                                            Aspect="AspectFill"
                                            HeightRequest="57"
                                            WidthRequest="57"                                                   
                                            BackgroundColor="Transparent"                                                       
                            />
                            
                            <!-- Testo sotto all'icona -->
                            <Label Grid.Row="1" 
                                   Text="{Binding IconText}" 
                                   FontSize="{StaticResource BaseFontSize}"
                                   HorizontalOptions="Center"
                                   Opacity="0.7"
                                   TextColor="{ DynamicResource BaseTextColor }" 
                                   FontAttributes="Bold"
                            />
                        </Grid>
                    </DataTemplate>
                </grial:Repeater.ItemTemplate>

                <!--SELECTED ITEM TEMPLATE-->
                <grial:Repeater.SelectedItemTemplate>
                    <DataTemplate>
                        <Grid VerticalOptions="FillAndExpand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition Height="auto"></RowDefinition>
                            </Grid.RowDefinitions>

                            <!-- Icon -->
                            <local:RoundedImage Grid.Row="0"
                                                CornerRadius="7"
                                                BorderSize="5"
                                                BorderColor="{DynamicResource BasePageColor}"
                                                IsCircular="False"
                                                Source="{ Binding IconSource }" 
                                                Style="{ StaticResource Avatar }"                    
                                                HorizontalOptions="CenterAndExpand"
                                                BackgroundColor="Transparent"
                                                HeightRequest="57"
                                                WidthRequest="57"                                                   
                            />

                            
                            <!-- Text -->
                            <Label Grid.Row="1" 
                                   Text="{Binding IconText}" 
                                   FontSize="{StaticResource BaseFontSize}"
                                   HorizontalOptions="CenterAndExpand"
                                   TextColor="{ DynamicResource AccentColor }"  
                                   Opacity="1" 
                                   Scale="1.1"
                            />
                        </Grid>
                    </DataTemplate>
                </grial:Repeater.SelectedItemTemplate>
            </grial:Repeater>

.... and in my viewModel i define the itemsource:

    public ObservableCollection<ActionButtonModel> ListActionButton { get; set; } = new ObservableCollection<ActionButtonModel>(){
            new ActionButtonModel { IconText="icon1", IconSource="icon_action_start" },
            new ActionButtonModel { IconText="icon2", IconSource="icon_action_selfpriming" },
            new ActionButtonModel { IconText="icon3", IconSource="icon_action_highpressvalve" },
            new ActionButtonModel { IconText="icon4", IconSource="icon_action_lowpressvalve" },
            new ActionButtonModel { IconText="icon5", IconSource="icon_action_resume" },
    };

.... and the model ActionButtonModel are this :

public class ActionButtonModel : ObservableObject
{
    public string IconText { get; set; }
    public string IconSource { get; set; }
}

I try to programmatically update the ListActionButton (adding new item, or removing existing item...) but in the UI the repeater doesn't update ! How can i "force" the update of the repeater in the UI for pull all the changes that i've maked in viewModel.ListActionButton ?

marketdevsoft avatar Dec 15 '22 15:12 marketdevsoft

Can you try with UXDivers.Grial nuget version 4.0.74-RC ? It should fix this problem.

dirivero avatar Dec 26 '22 17:12 dirivero

Hi, thanks for help me! I tried the new RC with this fix and it work! But there is one other little problem: if load page without repeater's elements, when i try to add programmatically at runtime, it not update, and the new elements not appear in the repeater!

Best regards!

marketdevsoft avatar Dec 30 '22 13:12 marketdevsoft

... also i'm trying this new use case: if i clear ListActionButton before adding new element (ListActionButton.Clear(); ListActionButton.Add(new ActionButtonModel { IconText = "Stop", .... ) my app crash with this error message: "System.ArgumentException: 'Reset action must be initialized with no changed items. (Parameter 'action')'" :

0xFFFFFFFFFFFFFFFF in Android.Runtime.JNIEnv.monodroid_debugger_unhandled_exception	C#
0x1A in Android.Runtime.JNINativeWrapper._unhandled_exception at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:12,5	C#
0x1D in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:23,26	C#
0x17 in System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw	C#
0x6 in System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0	C#
0xC in Android.App.SyncContext. at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.App/SyncContext.cs:36,19	C#
0xE in Java.Lang.Thread.RunnableImplementor.Run at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Java.Lang/Thread.cs:36,6	C#
0x8 in Java.Lang.IRunnableInvoker.n_Run at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/obj/Release/net7.0/android-33/mcw/Java.Lang.IRunnable.cs:84,4	C#
0x8 in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:22,5	C#

Best regards!

marketdevsoft avatar Dec 30 '22 13:12 marketdevsoft

Hi, About the loading issue, are you using an observable collection? Otherwise it can't detect the Adds. Regarding the Reset problem, please try again with the latest release 4.0.75 that fixes that. Thanks!

dirivero avatar Dec 31 '22 21:12 dirivero

Hi, i retested now with 4.0.75 version and the crash is resolved! But this problem not resolved: " if load page without repeater's elements, when i try to add programmatically at runtime, it not update, and the new elements not appear in the repeater!" Yes in my example i'm using observable collection (how showing in the code above):

.... and in my viewModel i define the itemsource:

public ObservableCollection<ActionButtonModel> ListActionButton { get; set; } = new ObservableCollection<ActionButtonModel>(){
        new ActionButtonModel { IconText="icon1", IconSource="icon_action_start" },
        new ActionButtonModel { IconText="icon2", IconSource="icon_action_selfpriming" },
        new ActionButtonModel { IconText="icon3", IconSource="icon_action_highpressvalve" },
        new ActionButtonModel { IconText="icon4", IconSource="icon_action_lowpressvalve" },
        new ActionButtonModel { IconText="icon5", IconSource="icon_action_resume" },
};

marketdevsoft avatar Jan 03 '23 09:01 marketdevsoft

Hi, Not sure if you solved this or not, but in case you didn't, can you send me the sample page/viewmodel to drivero [at] uxdivers.com ?

dirivero avatar Mar 09 '23 12:03 dirivero