CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.android
Dhruv Kinger
Dhruv Kinger

Reputation: 35

Dynamic records in a observable collection

This is my model

public class QMSRejection
{
    public string Id { get; set; }

    public string CardTypeIcon { get; set; }

    public string Date { get; set; }

    public string ShiftMasterId { get; set; }
}

This is my viewmodel and a function is there inside it calling an api that contains fields like date,Id,process and so on.

public class RejectionDetailsViewModel : BaseViewModel
{
    public ObservableCollection<QMSRejection> RejDetails { get; set; }

    public RejectionDetailsViewModel()
    {
        Function();
    }

    public async void Function()
    {        
        string url = AppSettingsManager.Settings["RejectionUrl"] + "GetList?strkey=30/08/2020";// + DateTime.Now.ToShortDateString();
        var data = await url.GetJsonAsync<List<QMSRejection>>();

        this.RejDetails = new ObservableCollection<QMSRejection>();
        {
            foreach (QMSRejection qms in data)
            {
                this.RejDetails.Add(new QMSRejection()
                {
                    Process = qms.Process,
                    ProductionReferenceId = qms.ProductionReferenceId,
                    Shift = qms.Shift,
                    BackgroundGradientStart = "#d54381",
                    BackgroundGradientEnd = "#7644ad",
                    CardTypeIcon = "Card.png"

                });
            }
        }
    }
}

This view model is called inside xaml where I have to display these records in a itemtemplate and calling in data template !

I am receiving the wrong cast type in viewmodel, and I am not sure I am doing it the right way as I have to display all the records as such! Let's say 100 records so 100 dynamic records inside observable collection.

I am calling in xaml as follows:

  <ContentPage.Content>
        <Grid RowSpacing="0" ColumnSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!--  ListView displaying saved cards  -->
            <ListView:SfListView x:Name="myCards" AutoFitMode="Height" IsScrollBarVisible="False" ItemSpacing="16,24,16,0" 
                                 SelectionGesture="Tap" SelectionBackgroundColor="Transparent" 
                                 SelectionMode="Single" AllowSwiping="True" 
                               ItemTapped="MyCards_tapped" ItemsSource="{Binding RejDetails}">
                <ListView:SfListView.ItemTemplate>
                    <DataTemplate>
                        <cards:SfCardView CornerRadius="4" HasShadow="True" HeightRequest="150" WidthRequest="300" 
                                              HorizontalOptions="CenterAndExpand">
                            <cards:SfCardView.Content>
                                <Grid>
                                    <gradient:SfGradientView>
                                        <gradient:SfGradientView.BackgroundBrush>
                                            <gradient:SfLinearGradientBrush>
                                                <gradient:SfLinearGradientBrush.GradientStops>
                                                    <gradient:SfGradientStop Color="{Binding BackgroundGradientStart}" 
                                                       Offset="0.0"/>
                                                    <gradient:SfGradientStop Color="{Binding BackgroundGradientEnd}" 
                                                       Offset="1.0"/>
                                                </gradient:SfLinearGradientBrush.GradientStops>
                                            </gradient:SfLinearGradientBrush>
                                        </gradient:SfGradientView.BackgroundBrush>
                                    </gradient:SfGradientView>

                                    <Grid RowSpacing="27" Margin="16,20" >
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>

                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>

                                        <!-- Process -->
                                        <Label Grid.Row="0" Grid.ColumnSpan="1" HorizontalOptions="Start"  
                                           VerticalOptions="Center" 
                                           Style="{StaticResource CardLabel}" 
                                           Margin="0,3" Text="{Binding Process}"  />

                                  
                                        <!-- ProductionReference Id -->
                                        <Label Grid.Row="0" Grid.ColumnSpan="3" Text="{Binding ProductionReferenceId}" 
                                         FontSize="16" HorizontalOptions="End"
                                        FontFamily="{StaticResource Montserrat-Medium}" 
                                        TextColor="{DynamicResource Gray-White}"
                                        LineHeight="{OnPlatform Default=-1, Android=1.5}" />

                                        <Grid Grid.Row="1" Grid.ColumnSpan="3">
                                            <!--  Shift  -->
                                            <StackLayout Grid.Column="0" Spacing="0">
                                                <Label Text="{Binding Shift}" Style="{StaticResource CardLabel}" />
                                            </StackLayout>

                                           </Grid>
                                    </Grid>
                                </Grid>
                            </cards:SfCardView.Content>
                        </cards:SfCardView>
                    </DataTemplate>
                </ListView:SfListView.ItemTemplate>
            </ListView:SfListView>

Upvotes: 0

Views: 528

Answers (1)

Jorge Fernandez Herrero
Jorge Fernandez Herrero

Reputation: 331

data is of type List<QMSRejection> and you are trying to cast it to QMSRejection instance

You should instantiate the the collection like you do:

this.RejDetails = new ObservableCollection<QMSRejection>();

Then loop the data:

foreach (QMSRejection qms in data)
{
    this.RejDetails.Add(new QMSRejection(){
          Process=qms.Process,
          ProductionReferenceId ="NN",
          Shift ="BB",
          BackgroundGradientStart = "#d54381",
          BackgroundGradientEnd = "#7644ad",
          CardTypeIcon = "Card.png"
    });
}

Your property RejDetails should make use of the INotifyPropertyChanged interface:

 private ObservableCollection rejDetails = null;
 public ObservableCollection RejDetails 
 { 
     get {return rejDetails;}
     set 
     {
         if(rejDetails != value)
         {
            rejDetails = value;
            OnPropertyChanged();
         }
     } 
}

Here is how to implement the interface: https://learn.microsoft.com/en-us/dotnet/framework/wpf/data/how-to-implement-property-change-notification

Upvotes: 1

Related Questions