locked
Binding a DataGrid in Silverlight RRS feed

  • Question

  • Hi,

    I am not able to Bind Datagrid in silverlight, while I am able to show data in TextBox. Please Help

    <UserControl x:Class="Test.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" d:DesignHeight="643" d:DesignWidth="700"  >
    
        <Grid x:Name="LayoutRoot" Background="White">
            <sdk:Label Height="28" HorizontalAlignment="Left" Margin="77,22,0,0" Name="label1" VerticalAlignment="Top" Content="Label" Width="120" />
            <sdk:DataGrid AutoGenerateColumns="False" Height="40" HorizontalAlignment="Left" Margin="44,59,0,0" Name="GrdNew" VerticalAlignment="Top" Width="250" >
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTemplateColumn Header="Id" CanUserResize="True" CanUserSort="True" Width="*">
                    <sdk:DataGridTemplateColumn.CellTemplate>              
                        <DataTemplate>
                                <StackPanel x:Name="tbId" ScrollViewer.VerticalScrollBarVisibility="Auto">
                                    <sdk:Label Name="lblgrdMrn" Content="{Binding Path=Id}"></sdk:Label>
                                </StackPanel>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    
                    <sdk:DataGridTemplateColumn Header="Name" CanUserResize="True" CanUserSort="True" Width="*">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <!--<TextBlock Text="Name">
                                    <TextBlock.Foreground>
                                        <ImageBrush ImageSource="forest.jpg"/>
    
                                        <sdk:Label Name="lblgrdName"  Content="Name"></sdk:Label>
                                    </TextBlock.Foreground>
                                </TextBlock>-->
                                <StackPanel   x:Name="tbName" ScrollViewer.VerticalScrollBarVisibility="Auto">
                                    <sdk:Label Name="lblgrdName" Content="{Binding Path=Name}"></sdk:Label>
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                    
                    <sdk:DataGridTemplateColumn Header="Address" CanUserResize="True" CanUserSort="True" Width="*">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel   x:Name="tbAddress" ScrollViewer.VerticalScrollBarVisibility="Auto">
                                    <sdk:Label Name="lblgrdAddress" Content="{Binding Path=Address}"></sdk:Label>
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
    
                    </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
            <TextBox Height="23" HorizontalAlignment="Left" Margin="242,22,0,0" Name="txtText" VerticalAlignment="Top" Width="120" />
            <Button Content="Button" Height="23" Margin="424,22,0,0" Name="button1" VerticalAlignment="Top" Click="button1_Click" HorizontalAlignment="Left" Width="75" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="106,159,0,0" Text="{Binding Path=Id}" Name="textBox1" VerticalAlignment="Top" Width="120" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="257,159,0,0" Text="{Binding Path=Name}" Name="textBox2" VerticalAlignment="Top" Width="120" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="433,159,0,0" Text="{Binding Path=Address}" Name="textBox3" VerticalAlignment="Top" Width="120" />
        </Grid>
    </UserControl>
    
    
    
    //Main.xaml.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Test1 = Test.ServiceReference1.Service1Client;
    using System.Collections;
    using Test.ServiceReference1;
    
    namespace Test
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                label1.Content = "Welcome";            
            }
            protected void obj_ITestCompleted(object sender, ServiceReference1.ITestCompletedEventArgs e)
            {
                LayoutRoot.DataContext = e.Result;
                
            }    
    
            private void button1_Click(object sender, RoutedEventArgs e)
            {
                if (!string.IsNullOrEmpty(txtText.Text.Trim()))
                {               
                    Test1 obj = new Test1();
                    obj.ITestCompleted += new EventHandler<ServiceReference1.ITestCompletedEventArgs>(obj_ITestCompleted);
                    obj.ITestAsync(txtText.Text);
                }
                else
                {
                    MessageBox.Show("Require TextBox");
                }
            }
        }
    }
    
    Friday, October 14, 2011 10:04 AM

All replies

  • If I am using

    GrdNew.DataContext = e.Result;

    It doesn't displays result


    GrdNew.ItemsSource = e.Result; this shows an error

     

     

    Friday, October 14, 2011 10:10 AM
  • As per your code, i think you have 3 properties in your dataclass.

    after you get the result in completed event serialize the e.result into dataclass and add these classes to observable collection.

    Follow the below example.

    .xaml.cs
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Data;
    
    namespace datagrid
    {
    
        public partial class DataGridwithCRUD : UserControl 
        {
            PagedCollectionView view;
           
            static List<MyClass> list = new List<MyClass>();
            public DataGridwithCRUD()
            {
                InitializeComponent();
                fillCustomer();
               
                view = new PagedCollectionView(list);
                
                view.PageSize = 5;
                Dtgrd.ItemsSource = view;          
               
                dataPager1.Source = view;
            }
           
            void fillCustomer()
            {
                for (int i = 0; i < 10; i++)
                {
                    MyClass myclass = new MyClass();
                  
                    myclass.Customer = (i + 10).ToString();
                    myclass.Customeradd = (i + 10).ToString();
                   
                    myclass.Customerpincode = (i + 10).ToString();
                    myclass.Customerrname = (i + 10).ToString();
                    myclass.Customertel = (i + 10).ToString();
                   
                    list.Add(myclass);
                }
    
            }     
    
        }
    	
    	 public class MyClass
        {
            private string Customer {get;set;}
           
            private string Customerrname {get;set;}
           
            private string Customeradd {get;set;}
           
            private string Customertel {get;set;}
          
            private string Customerpincode {get;set;}
         
        }
    }
      
    }
    
    .xaml
    
    
    <UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  x:Class="datagrid.DataGridwithCRUD"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
               
                 xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
        d:DesignHeight="300" d:DesignWidth="400">
        <UserControl.Resources>
            
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <StackPanel Orientation="Vertical" >
                <data:DataGrid AutoGenerateColumns="False" x:Name="Dtgrd"  Height="auto" HorizontalAlignment="Left"   VerticalAlignment="Top" Width="Auto" CanUserResizeColumns="False" CanUserReorderColumns="False" BorderThickness="3" BeginningEdit="Dtgrd_BeginningEdit" RowEditEnded="Dtgrd_RowEditEnded" CellEditEnded="Dtgrd_CellEditEnded" LoadingRow="Dtgrd_LoadingRow" LoadingRowDetails="Dtgrd_LoadingRowDetails">
                    <data:DataGrid.Columns>        
                        <data:DataGridTemplateColumn Header="Customer">
                            <data:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Height="30" Text="{Binding Customer,Mode=TwoWay}"></TextBlock>
                                </DataTemplate>
                            </data:DataGridTemplateColumn.CellTemplate>                       
                        </data:DataGridTemplateColumn>
                        <data:DataGridTemplateColumn Header="Customer Name">
                            <data:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Height="30" Text="{Binding Customerrname,Mode=TwoWay}"></TextBlock>
                                </DataTemplate>
                            </data:DataGridTemplateColumn.CellTemplate>                       
                        </data:DataGridTemplateColumn>
                        <data:DataGridTemplateColumn Header="Customer Address">
                            <data:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Height="30" Text="{Binding Customeradd,Mode=TwoWay}"></TextBlock>
                                </DataTemplate>
                            </data:DataGridTemplateColumn.CellTemplate>                       
                        </data:DataGridTemplateColumn>
                        <data:DataGridTemplateColumn Header="Customer Telephone">
                            <data:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Height="30" Text="{Binding Customertel,Mode=TwoWay}"></TextBlock>
                                </DataTemplate>
                            </data:DataGridTemplateColumn.CellTemplate>                       
                        </data:DataGridTemplateColumn>
                        <data:DataGridTemplateColumn Header="Customer Pincode">
                            <data:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Height="30" Text="{Binding Customerpincode,Mode=TwoWay}"></TextBlock>
                                </DataTemplate>
                            </data:DataGridTemplateColumn.CellTemplate>                      
                        </data:DataGridTemplateColumn>  
                    </data:DataGrid.Columns>
                </data:DataGrid>
                <data:DataPager HorizontalAlignment="Left"   Name="dataPager1" VerticalAlignment="Top"  PageSize="0"   Width="500" IsTotalItemCountFixed="True" />
               
            </StackPanel>
        </Grid>
    </UserControl>
    

    Saturday, October 15, 2011 12:54 PM