Silverlight DataGrid

If you are working on ASP.NET or windows application, you probably ever worked on datagrids.  Datagrid is the common control being used in .net application when you want to display large amounts of data.  If you are keen to work on Silverlight application, then there is a good news that datagrid control is available in Silverlight 2.0 version with very nice and powerful features. Here is the quick overview of silverlight datagrid features and walk through how to setup silverlight datagrid.

Note: You need to have installed Silverlight tools for visual studio 2008 to run the silverlight application.
Microsoft Silverlight 2 Tools for Visual Studio 2008 SP1 (this is still work you have installed)
Microsoft Silverlight 3 Tools for Visual Studio 2008 SP1 (Latest)

Create A Silverlight Application

Add Datagrid in Silverlight Project

Once you create a Silverlight application, MainPage.xaml(Page.xaml in Silverlight 2.0) file will be opened by default. You can find DataGrid control in toolbox and just drag and drop datagrid control into MainPage.xaml.  You will notice that it will add System.Windows.Control.Data reference in Silverlight project.

To give a name to datagrid you can use x:Name property like this


<data:DataGrid x:Name="dgSilverligh"></data:DataGrid>

Bind data to DataGrid

If you have ever used ASP.NET/Windows datagrid you used to bind Datatable/Dataset or list of objects.  Here is one difference in Silverlight datagrid.   You can only bind object(s) that implements IEnumerable .

You can specify ItemSource for datagrid like this

<data:DataGrid x:Name="dgSilverligh" AutoGenerateColumns="true" >
    <data:DataGrid.ItemsSource></data:DataGrid.ItemsSource>
</data:DataGrid>

Now press F7 or right click and go to code behind file.  We will create some sample data to bind to data grid.  I have created one member class.


public class Member
    {
        public Member(int member_id, string firstName, string lastName, string address, string city)
        {
            this.FirstName = firstName;
            this.LastName = lastName;
            this.Member_id = member_id;
            this.City = city;
            this.Address = address;
        }
        public int Member_id
        {
            get;
            set;
        }
        public string FirstName
        {
            get;
            set;
        }
        public string LastName
        {
            get;
            set;
        }

        public string Address
        {
            get;
            set;
        }

        public string City
        {
            get;
            set;
        }

    }

Now we have member class ready to use.  You will also see MainPage class default constructor in code behind file. Now lets call BindToGrid method in that constructor and it will be called when page gets loaded.

Here is the code.


public MainPage()
        {
            InitializeComponent();
            BindToGrid();
        }

        private void BindToGrid()
        {
            Member[] objMember = new Member[3];

            objMember[0] = new Member(1, "Shailesh", "Patel", "Adams St", "Westmont");
            objMember[1] = new Member(1, "Vimmi", "Patel", "Adams St", "Westmont");
            objMember[2] = new Member(1, "Shail", "Patel", "S Elmhurst Rd", "Mount Prospect");

            //Binding to Datagrid
            dgSilverligh.ItemsSource = objMember;
        }

I have created a array of member class object and bind that array to ItemsSource property of datagrid.  Now hit the F5 and see the output.  Here it is what you will see if everything went smoothly.

By default datagrid’s AutoGenerateColumns property is true so whatever the property Member class has will bind to datagrid.

You can also specify the columns what columns you want to bind in datagrid.  Set AutoGenerateColumns to false and specify the datagrid columns.

<data:DataGrid x:Name="dgSilverligh" AutoGenerateColumns="false" Width="450" Height="200" >
<data:DataGrid.Columns>
          <data:DataGridTextColumn    Binding="{Binding Member_id}"    Header="ID" ></data:DataGridTextColumn>
          <data:DataGridTextColumn Binding="{Binding FirstName}"    Header="First Name" />
          <data:DataGridTextColumn Binding="{Binding LastName}"    Header="Last Name" />
          <data:DataGridTextColumn Binding="{Binding Address}"    Header="Address" />
          <data:DataGridTextColumn Binding="{Binding City}"    Header="City" />
  </data:DataGrid.Columns>
</data:DataGrid>

You can assign property of member object to Binding property of DataGridTextColumn.  I have noticed that property name you specify here is case sensitive so please make sure about that otherwise you will see nothing being display on that column(it won’t throw any error hmmm)

Here is other cool features of DataGrid.  Try following features with the sample application that you are running now.

  • Column Resize
  • Column Reordering
  • Sorting
  • Row Editing
  • Multiple Row Selection
  • Built in validation: Try editing ID column and put some string in that.  You will see validation error message.  Very nice features ahhh…

  • Row Details:  If you want to put some help text for row you can specify RowVisibilityMode property of datagrid and set RowDetailsTemplate.
<data:DataGrid x:Name="dgSilverligh" AutoGenerateColumns="false" Width="450" Height="200" RowDetailsVisibilityMode="VisibleWhenSelected" >

  <data:DataGrid.RowDetailsTemplate>
   <DataTemplate >
     <TextBlock Text="Row details go here"></TextBlock>
   </DataTemplate>
  </data:DataGrid.RowDetailsTemplate>

  <data:DataGrid.Columns>
    <data:DataGridTextColumn    Binding="{Binding Member_id}"    Header="ID" ></data:DataGridTextColumn>
    <data:DataGridTextColumn Binding="{Binding FirstName}"    Header="First Name" />
    <data:DataGridTextColumn Binding="{Binding LastName}"    Header="Last Name" />
    <data:DataGridTextColumn Binding="{Binding Address}"    Header="Address" />
    <data:DataGridTextColumn Binding="{Binding City}"    Header="City" />
  </data:DataGrid.Columns>
</data:DataGrid>

These are the basic features Silverlight DataGrid control has.   You can download sourcecode here and here is live demo link.  Sample code requires to have Silverlight 3 Tools installed in Visual Studio 2008 SP1.

I will show you how you can get, delete, update in Silverlight datagrid using ADO.NET Data Service(WCF Service) in my next post.

Posted in Microsoft Technology Tagged with:
3 comments on “Silverlight DataGrid
  1. ros says:

    Thank you very much for you explanation, now I have a doubt and I wonder if you can help me, how I can publish the silverlight 4 project in IIS (Internet Information Services)?
    Many thanks for everything

  2. bhargavi says:

    I want the code for ………how can i get data into the datagird with hyperlink in silverlight4…

  3. madhu says:

    thanks

2 Pings/Trackbacks for "Silverlight DataGrid"
  1. […] If you want to know the features of Silverlight 3 datagrid and how to setup datagrid control in Silverlight application, here is my previous link. […]

  2. Silverlight DataGrid | Broken Code…

    […]Once you create a Silverlight application, MainPage.xaml(Page.xaml in Silverlight 2.0) file will be opened by default. You can find DataGrid control in toolbox and just drag and drop datagrid control into MainPage.xaml. …[…]…

Ads