Refresh a GridView

Programmer_00Programmer_00 ZAMember ✭✭
edited January 2018 in Xamarin.Forms

Hi,

I have a GridView and each tile contains user-specific details hence I would like a refresh on this view if the user's details had to change while using the app. I've tried the following approach by adding a refresh for one of my tiles but this doesn't work. Is there any other way to achieve this for the whole gridView?

My xaml

     <Grid x:Name="cardBalance" >
            <Image Source="GiftCard.jpg" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" Grid.Row="0" Grid.Column="0" x:Name="CardImage"/>
            <Image Source="store2.jpg" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>
            <Image Source="GridTrans.jpg" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" Grid.Row="0" Grid.Column="1" />
            <Image Source="ProfileBg2.JPG" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Grid.Row="2" Grid.Column="0" />
            <Image Source="gridSettings.JPG" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Grid.Row="2" Grid.Column="1" />

        <ScrollView Grid.Row="0" Grid.Column="0">
            <ListView x:Name="CardBalance" HasUnevenRows="True" Grid.Row="0" Grid.Column="0" VerticalOptions="Fill" IsPullToRefreshEnabled="True" Refreshing="CardBalance_Refreshing">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Vertical"
                                 HorizontalOptions="FillAndExpand"
                                 VerticalOptions="FillAndExpand"
                                 x:Name="Layout">
                                <Frame>

                                    <StackLayout Orientation="Horizontal"  HorizontalOptions="FillAndExpand">
                                        <StackLayout Orientation="Vertical"  HorizontalOptions="FillAndExpand">
                                            <Label Text="Card Balance:" TextColor="Black"/>
                                            <Label Text="{Binding Balance}" TextColor="Black"/>
                                        </StackLayout>
                                        <StackLayout Orientation="Vertical"  HorizontalOptions="EndAndExpand">
                                            <Image Source="{Binding CustomerLogo}" HeightRequest="60" WidthRequest="60"></Image>
                                        </StackLayout>
                                    </StackLayout>
                                </Frame>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </ScrollView>

        <Label Text=" Tap to view detail" TextColor="Gainsboro" FontSize="14"  FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="End" Grid.Row="0" Grid.Column="0" x:Name="CardTile"/>
        <Label Text=" Tap to view all card balances" TextColor="#64676b" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="End" Grid.Row="0" Grid.Column="0" x:Name="MultipleCards"/>


        <Label Text=" Transactions" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="End" Grid.Row="0" Grid.Column="1"  x:Name="TransactionTile"/>
        <Label Text=" Promotions" TextColor="White" FontSize="30" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="End" Grid.Row="1" Grid.Column="0"  Grid.ColumnSpan="2"  x:Name="PromoTile"/>
        <Label Text=" My Profile" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="End" Grid.Row="2" Grid.Column="0"  x:Name="ProfileTile" />
        <Label Text=" Settings" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="End" Grid.Row="2" Grid.Column="1"   x:Name="SettingsTile"/>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
    </Grid>

Xaml.cs (The refresh code)
private void CardBalance_Refreshing(object sender, EventArgs e)
{
LoadCards();
CardBalance.IsRefreshing = false;
}``

Answers

  • RyanDixonRyanDixon USMember ✭✭✭

    The rows and columns of a grid are not bindable (i.e meaning that you will have to reconstruct your Grid every time your data model changes).

    imho, the best way would be to listen for your data model to change by using something like an observable collection in your viewmodel and then using that as a trigger to start the reconstruction process.

    I might of misunderstood your question though so feel free to elaborate more.

  • Programmer_00Programmer_00 ZAMember ✭✭
    edited January 2018

    @RyanDixon said:
    The rows and columns of a grid are not bindable (i.e meaning that you will have to reconstruct your Grid every time your data model changes).

    imho, the best way would be to listen for your data model to change by using something like an observable collection in your viewmodel and then using that as a trigger to start the reconstruction process.

    I might of misunderstood your question though so feel free to elaborate more.

    Thanks for your response. My data in the ListView are binded from my api request, I'm not sure but can ObservableCollection be used to detect changes if data is displayed and updated from the API? I've not used ObservableCollection before but from my understanding I think it will only detect a change if the app itself triggers a change?

    Below is the code for the .cs

              public async void LoadCards()
                      {
                         try
                            {
                             List<Requests.Cards> cd = new List<Requests.Cards>();
                             var content = "";
                             HttpClient client = new HttpClient();
                           var RestUrl = Settings.RestUrl + "/api/Customer/GetCustomerCards?CustomerID=" + Helpers.Settings.storecustID;
                           client.BaseAddress = new Uri(RestUrl);
                          client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
                            client.DefaultRequestHeaders.Add("X-Giftworx-App", Helpers.Settings.Usertoken);
                           HttpResponseMessage response = await client.GetAsync(RestUrl);
    
                        content = await response.Content.ReadAsStringAsync();
    
                        var Items = JsonConvert.DeserializeObject<List<Requests.Cards>>(content);
    
                        CardBalance.ItemsSource = Items;
                        TapGestureRecognizer cardsLabel = new TapGestureRecognizer();
                        cardsLabel.Tapped += (sender, e) =>
                        {
                            Navigation.PushAsync(new Cards());
    
                        };
    
                        CardTile.GestureRecognizers.Add(cardsLabel);
                    }
                    catch (Exception ex)
                    {
                        string exception = ex.Message;
                    }
                }
    
                private void CardBalance_Refreshing(object sender, EventArgs e)
                {
                    LoadCards();
                    CardBalance.IsRefreshing = false;
                }
    
Sign In or Register to comment.