Working with the Data Grid in Silver Light..

Hello all,

We have all worked in ASP.NET data grid and that is simple. The same data grid is also there is Silver Light but a slightly different. While searching for some stuffs i came across several articles on the same topic so i thought to share the same with you all peoples hope you like this small article.

Here simply i am taking a data grid inside the silver light page and i will show that how can be bind the grid easily. A Data grid control sets its height and width according to the page. set the auto generate column property as false, set the name as "dgPersonal" Taking some columns like ID, First Name, Last Name and Email. Using the BINDING property of the grid to bind them. Please check the following XAML code

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" x:Class="Silverlight_Data_Grid.MainPage"
d:DesignWidth="640" d:DesignHeight="480">
x:Name="LayoutRoot">

Margin="5" x:Name="dgPersonal" Height="400" VerticalAlignment="Top" HorizontalAlignment="Center" GridLinesVisibility="All" AutoGenerateColumns="False">
>
Header="User ID" Width="70" Binding="{Binding UserID}" CanUserSort="True" IsReadOnly="True" CanUserReorder="False">>
Header="First Name" Width="150" MinWidth="150" CanUserReorder="False" SortMemberPath="FirstName">
>
>
Text="{Binding FirstName}" ToolTipService.ToolTip="{Binding FirstName}" FontFamily="Arial" FontSize="11" VerticalAlignment="Center" Margin="5,0,0,0" />
>
>
>
Header="Last Name" Width="150" MinWidth="150" Binding="{Binding LastName}" CanUserSort="True" IsReadOnly="True" CanUserReorder="False"/>
Header="Email Address" Width="150" MinWidth="150" Binding="{Binding EmailID}" CanUserSort="True" IsReadOnly="True" CanUserReorder="False"/>
Header="Contact" Width="100" MinWidth="100" Binding="{Binding ContactNumber}" CanUserSort="True" IsReadOnly="True" CanUserReorder="False"/>
Header="Date Of Birth" Width="160" MinWidth="160" Binding="{Binding DateOfBirth}" CanUserSort="True" IsReadOnly="True" CanUserReorder="False"/>
>
>

>
>

The GRID will look like this, please take a look..

On the other hand in the code behind file will be like this.

using System;
using System.Collections.Generic;
using System.Windows.Controls;

namespace Silverlight_Data_Grid
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
dgPersonal.ItemsSource = Persons.GetDataItems();
}

}

here inside the main page we are simply binding the grid from the list. I have made a class for that named as PERSON.This class is creates in another class file which is named as MyData, the Person class consist of the different member variables like the UserID, Firstname, Lastname & email etc.

for creating a data source the Generic list is used inside that we are binding the records. Please take a look towards the code behind file.

using System;
using System.Collections.Generic;

namespace Silverlight_Data_Grid
{
public class Persons
{

public string UserID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string EmailID { get; set; }
public string ContactNumber { get; set; }
public DateTime DateOfBirth { get; set; }

public static List<Persons> GetDataItems()
{
List<Persons> myPersonList = new List<Persons>
{
new Persons{ UserID="Anil", FirstName="Anil", LastName="Kumar", EmailID="anilk@pandey.com", ContactNumber="123456789", DateOfBirth=DateTime.Now.AddYears(-28)},
new Persons{ UserID="Abdul", FirstName="Abdul", LastName="javed", EmailID="abdul.javed@pandey.com", ContactNumber="123456789",DateOfBirth=DateTime.Now.AddYears(-27)},
new Persons{ UserID="chetanD", FirstName="Chetan", LastName="Desai", EmailID="chetan.desai@pandey.com", ContactNumber="123456789",DateOfBirth=DateTime.Now.AddYears(-32)},
new Persons{ UserID="manoj", FirstName="Manoj", LastName="Verma", EmailID="manojv@pandey.com", ContactNumber="123456789",DateOfBirth=DateTime.Now.AddYears(-30)},
new Persons{ UserID="vinod", FirstName="Vinod", LastName="Yadav", EmailID="vinod@pandey.com", ContactNumber="123456789",DateOfBirth=DateTime.Now.AddYears(-29)},
new Persons{ UserID="swati", FirstName="Swathi", LastName="s", EmailID="swati@pandey.com", ContactNumber="123456789",DateOfBirth=DateTime.Now.AddYears(-22)}
};
return myPersonList;

}
}
}

That's it from the coding side now we are ready to run the application.. Because the sort property is set so we can also sort the data grid records based on the column.After running the application the output will be like this.

Isn't it so simple. I too was very comfortable dealing with this grid in the silver light. We can explore more things inside the grid by our own. The main concept of this article was taken from one of the community sites of the official Microsoft Silver Light site that is http://www.silverlight.net Please feel free to comment on the article waiting for your comments....

Thanks
Anil Kumar Pandey
Micorsoft MVP (C#)
Navi Mumbai,
Maharashtra