.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

DataGrid Row Header In Silverlight

Posted By:Diptimaya Patra       Posted Date: March 25, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

DataGrid Row Header In Silverlight, but by default it is collapsed. We will see how can it be useful to a DataGrid display.
 

Introduction

DataGrid in Silverlight 3 has Row Header, but by default it is collapsed. We will see how it can be useful to a DataGrid display.

Creating the Silverlight Application

Fire up Visual Studio 2008 and create a Silverlight Application, name it as RowHeaderSample.

1.gif

Add a DataGrid to your application.


Create sample data as follows:

public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
public string Contact { get; set; }
}
public partial class MainPage : UserControl
{
List myList;
public MainPage()
{
InitializeComponent();
myList = new List()
{
new Person{ FirstName="First Name 1", LastName="Last Name 1", Age=20, Contact="00000000000" },
new Person{ FirstName="First Name 2", LastName="Last Name 2", Age=21, Contact="11111111111" },
new Person{ FirstName="First Name 3", LastName="Last Name 3", Age=22, Contact="22222222222" },
new Person{ FirstName="First Name 4", LastName="Last Name 4", Age=23, Contact="33333333333" },
new Person{ FirstName="First Name 5", LastName="Last Name 5", Age=24, Contact="44444444444" },
new Person{ FirstName="First Name 6", LastName="Last Name 6", Age=25, Contact="55555555555" },
new Person{ FirstName="First Name 7", LastName="Last Name 7", Age=26, Contact="66666666666" },
new Person{ FirstName="First Name 8", LastName="Last Name 8", Age=27, Contact="77777777777" },
new Person{ FirstName="First Name 9", LastName="Last Name 0", Age=28, Contact="88888888888" },
new Person{ FirstName="First Name 0", LastName="Last Name 0", Age=29, Contact="99999999999" },
};
dgMyGrid.ItemsSource = myList;
}

Now run the application to test the data loaded in DataGrid.

2.gif

Now to add the Row Header you need to use the following property:

  Height="184" Margin="66,50,293,0" VerticalAlignment="Top" Width="350"/>

Now run your application once again to test your Row Header.

3.gif

You got it right!

Now we will just add some more flavor to it. We would try to add the Row Number in the Row Header as you might have experienced in Microsoft Excel.

Use the following Event Handler:

  Height="184" Margin="66,50,293,0" VerticalAlignment="Top" Width="350"/>

Now in the Handler add the following code.

private void dgMyGrid_LoadingRow(object sender, DataGridRowEventArgs e)
{
e.Row.Header = e.Row.GetIndex() + 1;
}

That's it. Now run your application and see the Rows as Excel Rows.

4.gif
 
Hope you like this article.
 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend