Home > DeveloperSection > Beginner > Data Binding with DataGrid control

Data Binding with DataGrid control


SilverLight SilverLight 
Ratings:
0 Comment(s)
 4967  View(s)
Rate this:

Data Binding with DataGrid control

In this demonstration we learn how to implement complex data binding in silverlight. Here we show that how to bind data with list box control. We know that complex data binding means to bind data with such type of controls which have a capacity to show more than one value at a time. Best example for complex data binding is ListBox control, ComboBox control and DataGrid control etc. Here we see that how to bind data with DataGrid control.

XAML code which represent  user interface of Data Binding control

<Grid x:Name="LayoutRoot" Background="White">

        <data:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding}" Height="200" HorizontalAlignment="Left" Margin="43,36,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="293" >

            <data:DataGrid.Columns>

                <data:DataGridTemplateColumn Header="Employee Id" Width="Auto">

                    <data:DataGridTemplateColumn.CellTemplate>

                        <DataTemplate>

                            <TextBlock Text="{Binding ID}" />

                        </DataTemplate>

                    </data:DataGridTemplateColumn.CellTemplate>

                </data:DataGridTemplateColumn>

                <data:DataGridTemplateColumn Header="Employee Name" Width="Auto">

                    <data:DataGridTemplateColumn.CellTemplate>

                        <DataTemplate>

                            <TextBlock Text="{Binding Name}" />

                        </DataTemplate>

                    </data:DataGridTemplateColumn.CellTemplate>

                </data:DataGridTemplateColumn>

                <data:DataGridTemplateColumn Header="Employee Age" Width="Auto">

                    <data:DataGridTemplateColumn.CellTemplate>

                        <DataTemplate>

                            <TextBlock Text="{Binding Age}" />

                        </DataTemplate>

                    </data:DataGridTemplateColumn.CellTemplate>

                </data:DataGridTemplateColumn>

                <data:DataGridTemplateColumn Header="Employee City" Width="Auto">

                    <data:DataGridTemplateColumn.CellTemplate>

                        <DataTemplate>

                            <TextBlock Text="{Binding City}" />

                        </DataTemplate>

                    </data:DataGridTemplateColumn.CellTemplate>

                </data:DataGridTemplateColumn>

            </data:DataGrid.Columns>

        </data:DataGrid>

</Grid>

Noteà For implementing this task drag and drop DataGrid control from Toolbox then make appropriate changes

Create a class named Employee

public class Employee

{

        public string ID { get; set; }

        public string Name { get; set; }

        public string Age { get; set; }

        public string City { get; set; }

}

Create a method name GetEmployeeData() in MainPage class

public List<Employee> GetEmployeeData()

{

            List<Employee> emp = new List<Employee>();

            emp.Add(new Employee() { Name = "Awadhendra", Age="22" , City="Allahabad" , ID="E0001" });

            emp.Add(new Employee() { Name = "Abhishek", Age="24" , City="Allahabad" , ID="E0002" });

            emp.Add(new Employee() { Name = "Amit", Age="30" , City="Kanpur" , ID="E0003" });

            emp.Add(new Employee() { Name = "Haider", Age="28" , City="Kanpur" , ID="E0004" });

            emp.Add(new Employee() { Name = "Sachindra", Age="25" , City="Allahabad" , ID="E0005" });

            emp.Add(new Employee() { Name = "Uttam", Age="32" , City="Lucknow" , ID="E0006" });

            return emp;

}

Write down the following code at the load event of User Control

private void UserControl_Loaded(object sender, RoutedEventArgs e)

{

            dataGrid1.DataContext = GetEmployeeData();

}

Save the application and then execute it

Data binding with Datagrid

 

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick