locked
Metro App gridview datasource from Azure database (Beginner)

    Question

  • Hi,

    I go to new>project>split app. It creates me a demo split app with a gridview as main page.

    Now I just bought a Windows Azure account. I have a database and a table inside it with 3 columns. I want that gridview items should show the data from that table. Like the GroupTitle of Gridview should be data in 1st column of the table on azure. 

    How to do that please help!

    Thanks in advance.

    Thursday, December 20, 2012 9:12 PM

Answers

  • Hi,

    If you are using C# and XAML App then in the ItemsPage.xaml.CS file you can see the following statement

    This.DefaultViewModel["Items"] = sampleDataGroups; 

    to which you can bind the data source

    after which goto Common/StandardStyles.xaml in that page find the key "Standard250x250ItemTemplate" and change the binding elements(Image,Title,Subtitle) with your column names."Standard250x250ItemTemplate" Key is specified as itemtemplate in the ItemsPage.xaml.

    I hope this will help

    Thanks

    Raja KPV

    Friday, December 21, 2012 1:26 PM

All replies

  • Hi,

    If you are using C# and XAML App then in the ItemsPage.xaml.CS file you can see the following statement

    This.DefaultViewModel["Items"] = sampleDataGroups; 

    to which you can bind the data source

    after which goto Common/StandardStyles.xaml in that page find the key "Standard250x250ItemTemplate" and change the binding elements(Image,Title,Subtitle) with your column names."Standard250x250ItemTemplate" Key is specified as itemtemplate in the ItemsPage.xaml.

    I hope this will help

    Thanks

    Raja KPV

    Friday, December 21, 2012 1:26 PM
  • Hi,

    Thanks for your help Raja..

    but I did whatever you said... still its not working :( Its blank coming..

    Here is what I did:

    MainPage.Xaml.CS

     public sealed partial class ItemsPage : App2.Common.LayoutAwarePage
        {
            private MobileServiceCollectionView<TodoItem> items;
    
            private IMobileServiceTable<TodoItem> todoTable = App.MobileService.GetTable<TodoItem>();
             private async void InsertTodoItem(TodoItem todoItem)
            {
                // This code inserts a new TodoItem into the database. When the operation completes
                // and Mobile Services has assigned an Id, the item is added to the CollectionView
                await todoTable.InsertAsync(todoItem);
                items.Add(todoItem);
            }
    
             private void RefreshTodoItems()
             {
                 // This code refreshes the entries in the list view be querying the TodoItems table.
                 // The query excludes completed TodoItems
                 items = todoTable
                     .Where(todoItem => todoItem.Complete == false)
                     .ToCollectionView();
               //  ListItems.ItemsSource = items;
             }
    
             private async void UpdateCheckedTodoItem(TodoItem item)
             {
                 // This code takes a freshly completed TodoItem and updates the database. When the MobileService 
                 // responds, the item is removed from the list 
                 await todoTable.UpdateAsync(item);
                 items.Remove(item);
             }
    
            public ItemsPage()
            {
                this.InitializeComponent();
            }
    
            /// <summary>
            /// Populates the page with content passed during navigation.  Any saved state is also
            /// provided when recreating a page from a prior session.
            /// </summary>
            /// <param name="navigationParameter">The parameter value passed to
            /// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested.
            /// </param>
            /// <param name="pageState">A dictionary of state preserved by this page during an earlier
            /// session.  This will be null the first time a page is visited.</param>
            protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
            {
                // TODO: Create an appropriate data model for your problem domain to replace the sample data
                var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter);
                this.DefaultViewModel["Items"] = sampleDataGroups;
            }
    
            /// <summary>
            /// Invoked when an item is clicked.
            /// </summary>
            /// <param name="sender">The GridView (or ListView when the application is snapped)
            /// displaying the item clicked.</param>
            /// <param name="e">Event data that describes the item clicked.</param>
            void ItemView_ItemClick(object sender, ItemClickEventArgs e)
            {
                // Navigate to the appropriate destination page, configuring the new page
                // by passing required information as a navigation parameter
                var groupId = ((SampleDataGroup)e.ClickedItem).UniqueId;
                this.Frame.Navigate(typeof(SplitPage), groupId);
            }
        }
    
    
        public class TodoItem
        {
            public int Id { get; set; }
    
            [DataMember(Name = "text")]
            public string Text { get; set; }
    
            [DataMember(Name = "complete")]
            public bool Complete { get; set; }
    
            [DataMember(Name = "num")]
            public int num { get; set; }
    
        }

    and in my is Standard250x250ItemTemplate is

    <DataTemplate x:Key="Standard250x250ItemTemplate">
            <Grid HorizontalAlignment="Left" Width="250" Height="250">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                    <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                    <TextBlock Text="{Binding text}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
                    <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

    Monday, December 24, 2012 12:36 PM
  • Hi SuyashDixit,

    if you observed the Load State method you are assigning the data from the method GetGroups which is defind in the SampleDataSource.

    var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter);

    Please check the method and place your code to get data source in that method or call the method that will get your data source and assign it to sampleDataGroups

    Second one is if you observe the Standard250x250ItemTemplate in which binding is with the Image, text and Subtitle which is beside the Binding Keyword

    which should be your data item properties. Please check once.

    Regards

    Raja KPV 


    raja

    Wednesday, December 26, 2012 7:07 PM
  • Thanks raja...

    can you please update my code and write here?? or can u pls provide me a sample app?? pls!!

    Suyash

    Wednesday, December 26, 2012 7:43 PM
  • Hi

    Please update your code accordingly

       protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
            {
                
               // var sampleDataGroups = provide your list of TodoItems that you want to display (list<TodoItems>) ; \
    
    var sampleDataGroups = TodoItemsList;
             this.DefaultViewModel["Items"] = sampleDataGroups;
            }
    
    

    next update your template(Standard250x250ItemTemplate) bindings with your data item properties

    <DataTemplate x:Key="Standard250x250ItemTemplate">
            <Grid HorizontalAlignment="Left" Width="250" Height="250">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                    <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                    <TextBlock Text="{Binding text}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
    // here instead of binding subtitle you can bind with your 
    TodoItem property (complete). if you need to display more
    then you can add them here
    
    // remove the code 
                    <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
    
    // update with this code
     <TextBlock Text="{Binding complete}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
    
    
    
                </StackPanel>
            </Grid>
        </DataTemplate>

    I think the above changes might work.

    Regards

    Raja PV


    raja

    Thursday, December 27, 2012 6:03 PM