DataGridSilverlightApplication.zip (1.87 mb)

Live Demo

Introduction

In this article I will show you the basics of the DataForm control. what you can do with it and why you should use it. I will show you how you can bind an item or a collection of items to a data form.The DataForm control is like the DataGrid control in Silverlight 2. But while the DataGrid control is used to manipulate a list of items, the DataForm control focuses on the item itself.

DataGrid

DataGrids are fundamental UI controls for almost all line of business applications.Simplify the task of displaying structured data to users by automatically handling the rendering of rows, columns, headers, and data navigation. Silverlight's data grid is no exception.
The Width and Height attributes represent the width and the height of a DataGrid.  The x:Name  attribute represents the name of the control, which is a unique identifier of a control.  The Margin attribute sets the margin of the DataGrid being displayed from the top left corner.
The following code sets column width and row height to 680 and 270 respectively.
 
<data:DataGrid x:Name="McDataGrid" Width="680" Height="270"
       Margin="10,10,0,0" Background="Gray”>
</data:DataGrid>

Setting Column Width and Row Height
The ColumnWidth and RowHeight properties of DataGrid are used to set the default column width and row height of DataGrid columns and rows.
  ColumnWidth="100" RowHeight="40"

<data:DataGrid x:Name="McDataGrid" Width="680" Height="270"
  Margin="10,10,0,0" Background="Gray"
  ColumnWidth="100" RowHeight="40">
</data:DataGrid>

Sorting

By default, column sorting is enabled on a DataGrid. You can sort a column by simply clicking on the column header.  You may disable this feature by setting CanUserSortColumns property to false. The following code snippet sets CanUserSortColumns properties to false.
CanUserSortColumns = "False"


Scrolling

The HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties of type ScrollBarVisibility enumeration control the horizontal and vertical scrollbars of the DataGrid. It has four values - Auto, Disabled, Hidden, and Visible. The default value of these properties is Auto, that means, when scrolling is needed, you will see it, otherwise it will be hidden.
The following code enables the horizontal and vertical scrollbars.
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"


Properties

1.    AutoCommit – indicates whether to save the changes if the user presses the next (or the previous) button without pressing the Save button
2.    AutoEdit – indicates whether to go into Edit mode automatically when you select a record
3.     CancelButtonContent – lets the user set a content for the Cancel button
4.     CommitButtonContent – lets the user set the content for the Commit button
5.    CanUserAddItems – determines whether the user can add new items or not
6.    CanUserDeleteItems – determines whether the user can delete an existing item or not
7.     DescriptionViewerPosition – sets the position of description (each field may have a description
8.    Header – sets the header of the form
9.    AutoGenerateFields – indicates whether fields should be automatically generated or not.

Adding the Assembly to Use a DataGrid Control

We will display our data using the DataGrid control, but Silverlight does not include a reference to the DataGrid control by default, so we need to add one. This process is very similar to using a custom control in ASP.NET. Recall that we add a reference to the appropriate DLL in the project and then add a register tag in the aspx page. To achieve this in Silverlight, add a new reference (right click on References and select New Reference) and locate System.Windows.Controls.Data in the list (this is the assembly that contains the DataGrid).
Referencing assembly for DataGrid control
After this reference is added, we need to assign a namespace to this assembly in our XAML markup. To do this, add the following to the namespace declaration of the file Page.Xaml.The DataGrid is contained in the System.Windows.Controls  namespace. It can be dragged from the tool box to a XAML page. To use the DataGrid, we need to add the following namespace to our page:

xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

Adding the Data

Now that we have a Data Grid to use called dataGrid1,  we can prepare some data to display in the grid.  In this example, we'd like to display customer information.  Each row of the DataGrid will represent one customer.  First we'll need a customer entity to work with, so we'll create a Customer class.  We'll use automatic properties for each property used to describe customer information such as name or email.

public class Employee
        {
            public int ID { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string City { get; set; }
            public string FatherName { get; set; }
            public string PhoneNo { get; set; }
            public bool Status { get; set; }
        }

we have our Employee, we are ready to create a datasource to attach  to our DataGrid.  You can use any collection in .NET that supports IEnumerable to be the datasource for our DataGrid,  but you'll want to use an ObservableCollection if you want to have the ability to add and remove Employees from the collection and have them be reflected in the Grid

private List populatedlistEmployee()
        {
            listEmployee =    new List();
            listEmployee.Add( new Employee() { ID = 1, FirstName = "Aamir", LastName = "Hasan", City = "ISB",FatherName="Zahoor ahmed",PhoneNo="092-333-5494532",Status=true });
            listEmployee.Add( new Employee() { ID = 2, FirstName = "Awais", LastName = "Ahmed", City = "isb", FatherName = " ahmed", PhoneNo = "--", Status = false });
            listEmployee.Add( new Employee() { ID = 3, FirstName = "Ali", LastName = "hasan", City = "Rwp", FatherName = "hasan ahmed", PhoneNo = "--", Status = false });
            listEmployee.Add( new Employee() { ID = 4, FirstName = "Hasan", LastName = "khan", City = "Lha", FatherName = "ali ahmed", PhoneNo = "--", Status = false });
            listEmployee.Add( new Employee() { ID = 5, FirstName = "Ahmed", LastName = "ali", City = "Pwe", FatherName = "hasan khan", PhoneNo = "--", Status = false });
            listEmployee.Add( new Employee() { ID = 6, FirstName = "Bill", LastName = "gate", City = "new jersey", FatherName = "--", PhoneNo = "--", Status = true });
          
            return listEmployee;
        }

 Assigning the data to the DataGrid's ItemSource

public Page()
{
  InitializeComponent();
  McDataGrid.ItemsSource = populatedlistEmployee();

}

Output

Below is the output screen shot.

Now we have all the pieces in place to display the DataGrid on our Silverlight Web Page.  Let's look at the results shown in figure 3.  All the Employees in the Employees collection are displayed initially in our application.  To edit a cell, we simply click in the cell we want to edit and type our changes.  These changes will then be reflected in our Employees collection. 


Conclusion

The future of solid and rich web development is not ever going to be found in the raw browser.  It will be much more readily found in applications that can be embedded in the browser.  I'm looking forward to leveraging the power of Silverlight in the months to come. In this article, we learnt how to use a DataGrid control in Silverlight. I will add more DataGrid functionality to this article in my next update. If you developed any cool code and want to share here, feel free to post at the bottom.

The entire source code of this article can be downloaded over Here

DataGridSilverlightApplication.zip (1.87 mb)

Live Demo