locked
How to update the UI gridview contents dynamically?

    Question

  • Hello,

    I have a gridview whose itemsource is bound to an Observable Dictionary.

    this.objectViewModel["Folder"] =list; 

    On a particular event, a new object needs to be added to this list and gridview should get updated accordingly.

    When I do the following,    

    List<MyObject> list = (List<MyObject>)ObjectViewModel["Folder"];
     list.Add(newObjectToBeAdded);    

    the UI gridview doesnt get updated with the new object

    'MyObject'  is of type IEnumerable<CustomObject> which implements the INotifyCollectionChanged interface. In the Add method of this IEnumerable class , the following function is called.

     this.OnNotifyCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Add, newobjadded));

       #region INotifyCollectionChanged
            private void OnNotifyCollectionChanged(NotifyCollectionChangedEventArgs args)
            {
                if (this.CollectionChanged != null)
                {
                    this.CollectionChanged(this, args);
                }
            }
            public event NotifyCollectionChangedEventHandler CollectionChanged;
            #endregion INotifyCollectionChanged      

    However, the gridview does not seem to add the new object.

    this.CollectionChanged  is always null, and Im not sure why this is happening. Doesnt the GridView subscribe to the CollectionChanged event?

     I have created a small sample application to reproduce this issue.

    To access the project : https://onedrive.live.com/redir?resid=C4B31B12F545DC6C!450&authkey=!AFYrAww-OdxSkok&ithint=file%2czip

    Kindly help me to solve this issue.

    Thanks

    Friday, April 03, 2015 7:27 AM

Answers

  • It would be better for you to have a good sample for ObservableCollection with adding, changing and removing elements of the list.

    MainPage.XAML:

    <StackPanel>
      <GridView x:Name="MyGridView">
        <GridView.ItemTemplate>
          <DataTemplate>
            <TextBlock Text="{Binding Data}"/>
          </DataTemplate>
        </GridView.ItemTemplate>
      </GridView>
      <Button Click="Button_Click" Content="Add New Letter"/>
      <Button Click="Button_Click_1" Content="Change B to 2 or back"/>
      <Button Click="Button_Click_2" Content="Delete 3rd element of the collection"/>
    </StackPanel>
       
    MainPage.xaml.cs:
      public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
            ObservableCollection<ObservableItem> MyOC;
            int Count = 1;
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
                MyOC = new ObservableCollection<ObservableItem>();
                MyOC.Add(new ObservableItem() { Data = Count++.ToString()});
                MyOC.Add(new ObservableItem() { Data = Count++.ToString() });
                MyOC.Add(new ObservableItem() { Data = Count++.ToString() });
                MyOC.Add(new ObservableItem() { Data = Count++.ToString() });
                MyOC.Add(new ObservableItem() { Data = Count++.ToString() });
                MyGridView.ItemsSource = MyOC; 
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                MyOC.Add(new ObservableItem() { Data = Count++.ToString() });
            }
    
            private void Button_Click_1(object sender, RoutedEventArgs e)
            {
                if (MyOC[1].Data == "B") MyOC[1].Data = "2";
                else MyOC[1].Data = "B";
            }
    
            private void Button_Click_2(object sender, RoutedEventArgs e)
            {
                MyOC.RemoveAt(2);
            }
        }
    
        public class ObservableItem : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;
            private string _Data = string.Empty;
            public string Data
            {
                get 
                { 
                    return this._Data; 
                }
                set
                {
                    this._Data = value;
                    NotifyPropertyChanged("Data");
    
                }
            }
            private void NotifyPropertyChanged(String propertyName = "")
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }



    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by VDNS Tuesday, April 07, 2015 10:00 AM
    Monday, April 06, 2015 3:38 PM
    Moderator

All replies

  • Wouldn't it be better to just use ObservableCollection? What you've written looks like you're re-writing OC.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, April 03, 2015 1:33 PM
    Moderator
  • Thanks for your reply.

    I have tried using ObservableCollection as well, but the gridview does not seem to get updated.

    Could you please have a look at the sample application that I have shared and let me know if there is any issue with the data binding?

    Thanks a lot.

    Monday, April 06, 2015 11:20 AM
  • It would be better for you to have a good sample for ObservableCollection with adding, changing and removing elements of the list.

    MainPage.XAML:

    <StackPanel>
      <GridView x:Name="MyGridView">
        <GridView.ItemTemplate>
          <DataTemplate>
            <TextBlock Text="{Binding Data}"/>
          </DataTemplate>
        </GridView.ItemTemplate>
      </GridView>
      <Button Click="Button_Click" Content="Add New Letter"/>
      <Button Click="Button_Click_1" Content="Change B to 2 or back"/>
      <Button Click="Button_Click_2" Content="Delete 3rd element of the collection"/>
    </StackPanel>
       
    MainPage.xaml.cs:
      public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
            ObservableCollection<ObservableItem> MyOC;
            int Count = 1;
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
                MyOC = new ObservableCollection<ObservableItem>();
                MyOC.Add(new ObservableItem() { Data = Count++.ToString()});
                MyOC.Add(new ObservableItem() { Data = Count++.ToString() });
                MyOC.Add(new ObservableItem() { Data = Count++.ToString() });
                MyOC.Add(new ObservableItem() { Data = Count++.ToString() });
                MyOC.Add(new ObservableItem() { Data = Count++.ToString() });
                MyGridView.ItemsSource = MyOC; 
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                MyOC.Add(new ObservableItem() { Data = Count++.ToString() });
            }
    
            private void Button_Click_1(object sender, RoutedEventArgs e)
            {
                if (MyOC[1].Data == "B") MyOC[1].Data = "2";
                else MyOC[1].Data = "B";
            }
    
            private void Button_Click_2(object sender, RoutedEventArgs e)
            {
                MyOC.RemoveAt(2);
            }
        }
    
        public class ObservableItem : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;
            private string _Data = string.Empty;
            public string Data
            {
                get 
                { 
                    return this._Data; 
                }
                set
                {
                    this._Data = value;
                    NotifyPropertyChanged("Data");
    
                }
            }
            private void NotifyPropertyChanged(String propertyName = "")
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }



    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by VDNS Tuesday, April 07, 2015 10:00 AM
    Monday, April 06, 2015 3:38 PM
    Moderator
  • Thank you very much
    Tuesday, April 07, 2015 10:00 AM