Silverlight DataGrid Control

As I said in my previous post, that I would be blogging more about Silverlight, and other Microsoft technologies.

In this is post we will look at some basics of Silverlight DataGrid control. One of the chores of professional programmers working on business applications is to display data. And this is where DataGrid control comes into picture.

The Silverlights DataGrid control is highly flexibly and customizable control. But for now let’s look into the basics of it.

First create a new silverlight application. Name it DataGridDemo

Step 1: Right click the Silverlight application, add new Item and add a silverlight user control. Name it SimpleDataGrid.xaml or anything that pleases you. It generates a usercontrol, with a grid layout control.

Step 2: Now let’s add some rows to the Grid.


Step 3: Add a DataGrid from the toolbox or manually typing the xaml code for the same. If you are to do it manually ensure that the System.Windows.Controls namespace is added to the usercontrol.


Step 4: Now we need some data to populate the gird. Let’s define the class that defines the structure of this data. For this demo let’s assume that the grid holds dummy employee details information. Right click the DataGridDemo Application, and Add a class.

Step 4: Now set the AutoGenerateColumns property of the DataGrid to true. In the code behind of our Xaml we will take care of the binding. Our DataGrid will load the data when the DataGrid is loaded. So we will create an employee List with dummy employee details using the C# new collection initialize feature. And we will set the DataGrid’s ItemsSource property to this list.

Step 4: Build and view the output.


In real world applications we would have literally thousands of data to show. Which means our DataGrid would also grow making it difficult for the user. To overcome this issue the DataGrid comes with the height and width property that can be set, the vertical and horizontal scroll bars appear automatically when the DataGrid grows beyond what is specified in these properties.

Here is the final Mark up:

    1 <UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  x:Class="DataGridDemo.SimpleDataGrid"

    2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    4     Width="400" Height="300">

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

    6         <Grid.RowDefinitions>

    7             <RowDefinition></RowDefinition>

    8             <RowDefinition Height="Auto"></RowDefinition>

    9         </Grid.RowDefinitions>

   10     <data:DataGrid x:Name="grdEmployee" AutoGenerateColumns="True" HeadersVisibility="All" Grid.Row="0">

   11 

   12     </data:DataGrid>

   13     <data:DataPager Source="{Binding ItemsSource, ElementName=grdEmployee}" PageSize="5" Grid.Row="1"></data:DataPager>

   14     </Grid>

   15 </UserControl>

Here is the Code behind:

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Net;

    5 using System.Windows;

    6 using System.Windows.Controls;

    7 using System.Windows.Documents;

    8 using System.Windows.Input;

    9 using System.Windows.Media;

   10 using System.Windows.Media.Animation;

   11 using System.Windows.Shapes;

   12 using org.RameshSubramanian.DataGridDemo.Model;

   13 using System.Windows.Data;

   14 

   15 namespace DataGridDemo

   16 {

   17     public partial class SimpleDataGrid : UserControl

   18     {

   19         public SimpleDataGrid()

   20         {

   21             InitializeComponent();

   22             grdEmployee.Loaded += new RoutedEventHandler(grdEmployee_Loaded);

   23         }

   24 

   25         void grdEmployee_Loaded(object sender, RoutedEventArgs e)

   26         {

   27             List<Employee> empList = new List<Employee>{ new Employee{ EmpId = 1000, FirstName = "Ramesh", LastName = "Subramanian", DeptId = 10}, 

   28                                                          new Employee{ EmpId = 1001, FirstName = "Raja", LastName = "Ravanan", DeptId = 10}, 

   29                                                          new Employee{ EmpId = 1002, FirstName = "Jayanth", LastName = "Chintaparti", DeptId = 20},

   30                                                          new Employee{ EmpId = 1003, FirstName = "Prakash", LastName = "Sadhasivam", DeptId = 20},

   31                                                          new Employee{ EmpId = 1004, FirstName = "Smitha", LastName = "Koshy", DeptId = 30},

   32                                                          new Employee{ EmpId = 1005, FirstName = "Thamizh", LastName = "N", DeptId = 30}

   33                                                         };

   34             grdEmployee.ItemsSource = new PagedCollectionView(empList);

   35         }

   36     }

   37 

   38 }

Another alternative is to use the DataPager. Just add the DataPager and bind its ItemsSource to the DataGrid and ensure that the DataGrid’s ItemsSource property is assigned to collection that implements IPagedCollectionView. We will use the default implementation of IPagedCollectionView.





A gotcha you need to keep in mind is, the DataGrid and DataPager should be on different rows of the Grid Layout. It’s easy to miss this, as when 2 controls are on the same row we could see that one control overlaps the other. But with the DataPager, everything will look normal except that you can’t select your DataGrid. One of my projects required the use of DataGrid with DataPager. The DataGrid contained buttons, Textboxes, Combo Boxes that fired events. Once I added the DataPager none of them fired any events, the DataGrid was unselectable. Previously I was having problem with adding and deleting rows and maintaining the sate of information in the controls present the DataGrid. So I was looking into whether this had to do anything with problem I had faced previously. Only later did I realize that my DataPager was overlapping my DataGrid.

Back!

Image via Wikipedia

I am back, after a long time!

And a lot has changed. My last post was about the release of Netbeans 6.1, now its in V. 6.7. its not the only thing that has changed. I finished my undergraduate program and got a job with Tata Consultancy Services!

One thing that I frequently blogged about was Java, now, that is going to change. I will be talking more about Microsoft technologies as that is what I am working on now. I was trained as a java programmer at my job (something I wanted to be). But recession meant we had very little opportunities, and you need to make the best out of what you get. And hence the transformation to Microsoft technologies.

Currently I am working on Silverlight 3.0, ASP .NET 3.5, C# 3.0:

Silverlight - Its a relatively new framework that is still evolving. Microsoft's shot at RIA.

Seems like I will be blogging a lot about Silverlight, & .NET 3.5!